Lite Tools

Color Contrast Checker

Check text contrast against WCAG AA and AAA levels.

Contrast ratio-
Normal text AA (≥ 4.5)-
Normal text AAA (≥ 7)-
Large text AA (≥ 3)-
Large text AAA (≥ 4.5)-
Sample preview

Normal text: a modern web page should be readable for every visitor.

Large text sample

"Large text" means at least 24px regular or 18.66px bold, which carries a looser threshold.

Based on the WCAG 2.x relative-luminance formula: ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. Everything is computed locally.

How to use

  1. Pick the foreground (text) and background colors with the color controls, or type HEX values directly.
  2. The ratio is computed live with the WCAG formula (a value between 1 and 21).
  3. Read the verdict table: the four AA/AAA rows for normal and large text are marked green "Pass" or red "Fail".
  4. The sample preview renders normal and large text in your colors so you can judge readability at a glance.
  5. Curious about the inverted pairing? Hit "Swap foreground / background" to exchange the two colors instantly.

FAQ

How is the contrast ratio calculated?
Each HEX color is converted to sRGB, then linearized per the WCAG definition and combined into a relative luminance L (R 0.2126, G 0.7152, B 0.0722). The ratio divides the lighter luminance plus 0.05 by the darker luminance plus 0.05, giving a value from 1 to 21.
What is the difference between AA and AAA?
They are the two WCAG conformance levels: AA is the baseline required by most laws and audits (4.5 for normal text, 3 for large text), while AAA is the stricter enhanced level (7 and 4.5). Shipping products should meet AA at minimum.
What counts as "large text"?
WCAG defines it as text of at least 24px (18pt) at regular weight, or at least 18.66px (14pt) when bold. Large text has lower contrast requirements, so its thresholds are looser.
The ratio passes but reading still feels hard: what else can I do?
Contrast only measures luminance difference, not letter spacing, line height or the typeface itself. Try a slightly larger font size, more generous line height, avoid the harsh pure-black-on-pure-white combo, or aim for 7:1 or higher for body copy to make reading more comfortable.

How to use

  1. Enter both colors

    Set the foreground (text) and background with the color pickers or by typing 3- or 6-digit HEX values. Results update as you type.

  2. Read the contrast ratio

    The ratio appears live and always falls between 1 and 21. Higher means clearer text. It comes from the WCAG relative-luminance formula.

  3. Check the four verdicts

    Compare the four rows. Normal text needs AA at 4.5 and AAA at 7. Large text needs AA at 3 and AAA at 4.5. Each row is marked green Pass or red Fail.

  4. Preview and swap

    The sample preview renders normal and large text in your colors; press Swap foreground / background to test the inverted pairing instantly.

About this tool

Color Contrast Checker measures how distinguishable your text is from its background using the WCAG 2.x relative-luminance formula. Each hex color is linearized and weighted (red 0.2126, green 0.7152, blue 0.0722) into a luminance L. The ratio divides the lighter luminance plus 0.05 by the darker plus 0.05, producing a value from 1 to 21. The verdicts map onto WCAG levels: AA is the baseline most accessibility laws and audits demand, AAA is the stricter enhanced tier.

Use it before signing off buttons, placeholders and gray-on-white body text, or as the self-check step of an accessibility audit. Remember what the number does not cover. Contrast measures luminance difference only. Letter spacing, line height and the typeface itself sit outside the formula. For comfortable long-form reading aim beyond the minimum, around 7:1, and avoid the harsh pure-black-on-pure-white combination.

How it works

The 0.05 offset in (L1+0.05)/(L2+0.05) is deliberate. It makes pure black against pure white exactly 21, and it keeps the denominator from reaching zero when black is the background. Before any of that, each sRGB channel is gamma-expanded and weighted: red 0.2126, green 0.7152, blue 0.0722. The weights mirror how strongly human vision responds to green. That is why the computed number usually agrees with the eyes.

The thresholds trace back to readability research. Low-vision readers supplied the baseline data, and the 3:1 level doubles as the WCAG requirement for graphical objects and control borders, criterion 1.4.11. Large text means 24px regular or 18.66px bold and above, with looser thresholds of 3 and 4.5. The newer APCA model grades text more finely by weight and color. Accessibility laws around the world still enforce the classic ratio, though. AA at 4.5 and AAA at 7 remain the numbers that auditors and legal teams will hold you to for the foreseeable future.

When to use it

  1. Placeholder gray audit

    Input hints are usually a #999-class gray, barely 2.8:1 on white. Darken one step toward #767676 to clear 4.5. This single check is the most common miss on polished forms.

  2. Acceptance for chart palettes

    Pair every series color with the chart background before shipping. Anything under 3:1 is hard to tell apart, so rotate the hue or stretch the lightness gap and re-test.

  3. Grading grays in email templates

    Email clients render unpredictably and offer little style fallback. Test body copy, secondary notes and the copyright line separately, so the palest tier still clears AA.

Tips & tricks

  • Large text means 24px regular weight or 18.66px bold and above; its thresholds loosen to 3:1 and 4.5:1.
  • If the ratio passes but reading feels hard, increase font size and line height, or soften pure white backgrounds.
  • Test hover and disabled button states too. They are the pairings most often missed, and they easily drop below 3:1.

Things to watch

  • Composite translucent colors first

    Text at 60% opacity renders as a blend with the background, not as the color you set. Convert it to the equivalent solid HEX before testing, or the ratio will overstate real readability.

  • Test both ends of a gradient

    On a gradient background the ratio shifts continuously, so one measurement cannot cover the whole surface. Measure the darkest and lightest ends; both must pass before any position on the banner is safe.

  • Split brand colors by tier

    A bright brand color on dark often lands between 3 and 4.5. Keep it for large headlines that qualify for the 3:1 tier, and move body text to neutral colors.

Related Tools