Skip to content
littlekit.app

Contrast checker

Check text contrast with live reading samples and WCAG AA and AAA thresholds.

A pair of colors

Make every word
easy to read.

Good contrast makes text easier to read in everyday situations. Try your own foreground and background to see the difference.

This paragraph uses normal-size text.
HEX, RGB or HSL · alpha supported
HEX, RGB or HSL · alpha supported

Background must be opaque. Foreground transparency is blended over it.

9.90:1Contrast ratio
AA normal ≥ 4.5:1Pass
AA large ≥ 3:1Pass
AAA normal ≥ 7:1Pass
AAA large ≥ 4.5:1Pass
Processed on your device

How it works & useful details

How to use this tool

Choose foreground and background colors, then inspect both reading samples and the pass/fail table.

Supported values and limitations

Uses WCAG 2.2 relative sRGB luminance. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 and 4.5:1 respectively. Large text means at least 24 CSS px regular or 18⅔ CSS px bold. Foreground alpha is composited over an opaque background. Thresholds use the unrounded ratio.

WCAG contrast guidance

About this tool

Contrast checker measures the contrast ratio between a text color and its background and shows whether it meets the WCAG AA or AAA thresholds. Live reading samples make it obvious how the combination feels at normal and large text sizes.

Both colors are supplied by you, and the ratio is computed locally with the WCAG relative-luminance formula. The tool reports pass or fail per threshold rather than guessing at intent.

How to use it

  1. Enter or pick the text color and the background color.
  2. Read the contrast ratio and the AA and AAA results.
  3. Check the reading samples at different sizes.
  4. Adjust the colors until the combination meets your target level.

Worked examples

#334155 on #f8fafc   9.90:1   passes AA and AAA
#767676 on #ffffff   4.54:1   passes AA, fails AAA for normal text
#999999 on #ffffff   2.85:1   fails everything

#767676 is famous as the lightest grey that still passes AA for normal text on white. The popular #999 placeholder grey fails even the large-text threshold.

The WCAG thresholds

  • AA, normal text: at least 4.5:1.
  • AA, large text (at least 24px, or 18.66px bold): at least 3:1.
  • AAA, normal text: at least 7:1.
  • AAA, large text: at least 4.5:1.

Contrast is calculated from the relative luminance of both colours, so the result is the same whichever is text and whichever is background. The ratio ranges from 1:1 (identical colours) to 21:1 (black on white). WCAG AA is the level required by most accessibility laws, including the European Accessibility Act and the ADA as interpreted by US courts. Check every text and background pair in your design, including placeholder text, disabled states, and text on images.

Frequently asked questions

What do the AA and AAA levels require?

AA needs a ratio of 4.5:1 for normal text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. The tool shows each result separately.

Does transparency affect the result?

Yes. If a color is semi-transparent, the effective color depends on what is behind it, so use opaque values for a reliable measurement.

Is a passing ratio enough for accessibility?

It is one requirement among several, including focus visibility, text size, and motion preferences.

How is a transparent foreground handled?

The foreground's alpha is composited over the opaque background first, and the resulting solid colour is measured, just as it would appear on screen.