Color Contrast Checker — WCAG AA & AAA

Why color contrast matters

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Even among users with typical vision, low contrast makes text harder to read in bright sunlight, on budget screens, or in any environment where glare or reflections reduce effective display brightness. A color contrast checker quantifies how readable a text and background color pair actually is, replacing subjective judgment with a number you can defend in a design review or accessibility audit.

The Web Content Accessibility Guidelines (WCAG) are the internationally recognized standard for web accessibility, published by the W3C. WCAG defines specific minimum contrast ratios for text and user interface components. Conforming to these thresholds is legally required in many jurisdictions — the ADA in the United States, the EU Web Accessibility Directive, and accessibility regulations in the UK, Canada, and Australia all reference or incorporate WCAG criteria. For public-sector sites, WCAG conformance is often a procurement requirement; for private-sector sites, failure to meet AA is increasingly used as evidence in discrimination complaints.

This color accessibility checker takes a foreground color and a background color, computes the WCAG contrast ratio, and returns immediate pass/fail verdicts for both the AA and AAA conformance levels. No signup, no account, no data sent to a server — the entire calculation runs in your browser.

The WCAG contrast ratio scale

The wcag contrast ratio is a single number ranging from 1:1 to 21:1. A ratio of 1:1 means the two colors are identical — zero contrast. A ratio of 21:1 is the maximum, achieved by pairing pure black (#000000) and pure white (#ffffff). Most usable text sits somewhere between 4:1 and 12:1 in practice.

WCAG 2.1 defines two conformance levels for contrast — AA and AAA — with different thresholds depending on whether the text is normal-sized or large:

• AA — normal text: 4.5:1 minimum. This is the baseline most organizations target.
• AA — large text: 3:1 minimum. Large text is defined as at least 18pt (24px) at normal weight, or at least 14pt (18.67px) bold.
• AAA — normal text: 7:1 minimum. Required for Level AAA conformance and some government procurement specifications.
• AAA — large text: 4.5:1 minimum.

A new contrast model — APCA (Advanced Perceptual Contrast Algorithm) — is being developed for WCAG 3.0. It accounts for font weight, size, and polarity (light text on dark vs. dark text on light) with greater perceptual accuracy. However, WCAG 3.0 is not yet finalized or legally adopted. WCAG 2.1 AA and AAA remain the current reference for legal compliance and accessibility conformance statements.

How to use this contrast ratio calculator

1. Enter the foreground color (the text color) in the first field. Hex values like #1a1a1a are accepted; use the color picker if you prefer to choose visually.
2. Enter the background color in the second field using the same format.
3. Read the contrast ratio displayed between the two inputs — for example, 8.59:1.
4. Check the AA and AAA pass/fail badges for both normal and large text sizes. Green means the pair passes that level; red means it fails.
5. Use the swap button to reverse foreground and background and verify the inverted color pair. The ratio is symmetric — it does not change — but swapping helps catch cases where you have the pair entered backwards.
6. If the pair fails AA, adjust one of the colors — darken the background or lighten the text — until the ratio clears 4.5:1 for normal text. Iterating directly in the tool is faster than switching back to a design application.

Example: checking a common brand color

Suppose your brand uses a medium blue background with white text. Enter the values and read the result:

Foreground (text):   #ffffff
Background:          #4a90d9

Contrast ratio:      3.12:1

WCAG AA  — normal text (4.5:1 required):  FAIL
WCAG AA  — large text  (3.0:1 required):  PASS
WCAG AAA — normal text (7.0:1 required):  FAIL
WCAG AAA — large text  (4.5:1 required):  FAIL

This color pair is safe for large headings but not for body text. To fix it for body copy, darken the background. Switching to #2a6db5 raises the ratio to approximately 5.1:1 — enough to pass AA for normal text while keeping the brand hue recognizable.

Foreground (text):   #ffffff
Background:          #2a6db5

Contrast ratio:      5.14:1

WCAG AA  — normal text (4.5:1 required):  PASS
WCAG AA  — large text  (3.0:1 required):  PASS
WCAG AAA — normal text (7.0:1 required):  FAIL
WCAG AAA — large text  (4.5:1 required):  PASS

How the relative luminance formula works

The contrast ratio is derived from the relative luminance of each color, calculated using the formula in the WCAG 2.1 specification. The process has two stages.

First, each sRGB channel (R, G, B as values from 0 to 1) is linearized with a gamma correction. For channel values at or below 0.04045, divide by 12.92; for values above that threshold, apply the formula ((c + 0.055) / 1.055) ^ 2.4. This undoes the gamma encoding that display hardware applies and produces a linear light value.

Second, the three linearized channels are combined using perceptual weights: R: 0.2126 (21.26%), G: 0.7152 (71.52%), B: 0.0722 (7.22%). The green channel dominates because the human eye has far more green-sensitive cone cells than red or blue. The resulting luminance value L sits between 0 (absolute black) and 1 (absolute white).

The ratio between two luminance values L1 (lighter) and L2 (darker) is computed as (L1 + 0.05) / (L2 + 0.05). The +0.05offset prevents division by zero when L2 is pure black and also models the ambient light reflected from a real screen — even a "black" pixel reflects some light in typical viewing conditions.

Tools that compute web accessibility color contrast using simplified brightness-difference or color-difference formulas instead of this luminance algorithm will give incorrect results and should not be used for WCAG compliance purposes.

Limits of this tool

• This tool checks contrast ratio only. It does not test whether your palette is safe for users with deuteranopia, protanopia, or other specific forms of color blindness. Two colors can have a high contrast ratio while appearing nearly identical to a color-blind user. Use a separate color-blind simulation tool alongside this checker.
• The calculation uses the WCAG 2.1 luminance algorithm. The emerging APCA model used in WCAG 3.0 produces different results, especially for light text on dark backgrounds and at small font sizes. APCA verdicts are not shown here.
• Input accepts hex colors only. If your colors are in RGB or HSL, convert them first using the Color Converter before pasting them here.
• The tool does not evaluate non-text contrast (WCAG Success Criterion 1.4.11) for UI component boundaries, icons, or focus indicators, which require 3:1 against adjacent colors. That assessment requires visual context the tool cannot infer from two hex values alone.

Common mistakes when checking color contrast

• Stopping at AA and assuming AAA is optional everywhere. WCAG Level AA conformance requires only 4.5:1 for body text, but some government and enterprise procurement contracts explicitly require AAA (7:1) for all text. Check your specific contract requirements before treating AA as sufficient.
• Not checking hover and focus states. Interactive elements — links, buttons — change color on hover and focus. Each state must independently meet the contrast requirement. A link that passes AA in its default state may fail in its visited or hover state.
• Assuming a color "looks fine." Low contrast frequently passes casual visual review because viewers unconsciously compensate. Users with low vision cannot compensate. Measure with a tool; do not rely on visual intuition alone.
• Forgetting placeholder text.Placeholder text in form inputs is commonly styled with a lighter shade to signal that it is placeholder content — but it still needs to meet the AA 4.5:1 threshold. Browsers' default placeholder styling typically fails WCAG. Check it explicitly.
• Checking the wrong pair. It is easy to accidentally enter the background color as foreground, or to test a color against the wrong background layer when multiple layered backgrounds are involved. The swap button helps verify you have the pair in the right order; remember the ratio is identical in either direction.
• Ignoring text over images or gradients. A contrast ratio only makes sense against a uniform background. Text placed over a photograph or a gradient may pass the check against the average background color but fail against the lightest or darkest region. Test against the worst-case background tone, not the average.

Privacy

All contrast calculations run entirely in your browser. The hex values you enter are never transmitted to any server, never logged, and never used for analytics. There is no account, no signup, and no tracking of which colors you check. This makes the tool safe to use with unreleased brand colors, client work under NDA, or any design material you prefer to keep private.

Related tools

If you are working on a broader design system, these tools complement the contrast checker directly:

• Color Converter — convert between HEX, RGB, and HSL so you can paste hex values into this tool from any source format.
• Color Palette Generator — generate complementary, triadic, and analogous palettes from a base color, then run each pair through this checker.
• CSS Border Radius Generator — fine-tune the visual styling of UI components while keeping your color choices accessible.

Frequently asked questions

What is the minimum contrast ratio for body text?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text — text below 18pt regular or 14pt bold. This threshold applies to virtually all body copy, labels, captions, and UI text at typical reading sizes. If you target Level AAA conformance, the minimum for normal text rises to 7:1. For large text (18pt or larger at normal weight, or 14pt or larger bold), the AA minimum is 3:1 and the AAA minimum is 4.5:1.

Does the contrast ratio change if I swap foreground and background?

No. The WCAG contrast ratio formula always divides the lighter luminance by the darker luminance (with the 0.05 offset applied to both), so the result is identical regardless of which color you call foreground and which you call background. The ratio between white text on a dark button and dark text on a white button is mathematically the same. The swap button in the tool exists to help you avoid entering the pair in the wrong order — not because it would change the computed ratio.

What exactly counts as "large text" under WCAG?

WCAG 2.1 defines large text as text that is at least 18 point (pt) at normal weight, or at least 14 point at bold weight. In CSS pixel equivalents: 18pt is approximately 24px, and 14pt is approximately 18.67px. These thresholds refer to the rendered font size, not the font-size CSS property value before any browser zoom or user style overrides. A heading set to font-size: 1.5rem at a 16px base renders at 24px and qualifies as large text, so a 3:1 ratio is sufficient for AA compliance at that size.

My design fails AAA — is that a problem?

Not necessarily. WCAG Level AAA is the highest conformance tier and is not required for most public or commercial websites. WCAG itself notes that conforming to all AAA criteria is not achievable for all content. Most legal requirements — ADA, EU Web Accessibility Directive, AODA — reference WCAG Level AA, not AAA. Where AAA matters is in specific government procurement, accessibility statements that explicitly claim AAA conformance, or products targeting users with significant visual impairment. Failing AAA while passing AA at 4.5:1 or above is generally acceptable unless your contract or conformance statement specifies otherwise.

Is WCAG AA legally required?

In an increasing number of jurisdictions, yes. In the United States, the ADA has been interpreted to require WCAG 2.1 AA for most public-facing websites, and the Department of Justice finalized rules in 2024 confirming this for state and local government sites. The EU Web Accessibility Directive requires WCAG 2.1 AA for all public-sector websites and mobile apps. The UK, Canada (AODA in Ontario), and Australia (DDA) have analogous requirements. Private-sector requirements vary by country and sector, but WCAG AA is the safe baseline for any organization that wants to minimize legal exposure and serve all users effectively.

What is the difference between WCAG 2.1 and WCAG 3.0 (APCA)?

WCAG 2.1 uses relative luminance — a channel-weighted average of linearized RGB values — to compute a single contrast ratio. This formula is simple, deterministic, and currently the legally recognized reference worldwide. WCAG 3.0 introduces APCA (Advanced Perceptual Contrast Algorithm), which accounts for font size, font weight, and the direction of contrast (light-on-dark vs. dark-on-light) to produce results that correlate more closely with human perception. APCA can give meaningfully different verdicts from the WCAG 2.1 formula, particularly for small or lightweight text. However, WCAG 3.0 remains a working draft and has not been adopted by any legal framework as of 2026. Use WCAG 2.1 AA as your compliance target and treat APCA as supplementary guidance only.