A familiar near miss
Gray #777777 on white has a ratio of about 4.48:1. It fails the 4.5:1 normal-text AA requirement even though rounding to one decimal would display 4.5.
Color pair
Alpha is composited in sRGB: background over the selected canvas, then text over that result. Parent opacity, images, gradients, blending, and text antialiasing are outside this model.
Contrast results
Text contrast preview
The quick brown fox jumps over the lazy dog.
Preview size does not change the calculated ratio.
WCAG contrast13.18:1
AA normal textPass
| Check | Minimum | Result |
|---|---|---|
| AA normal text | 4.5:1 | Pass |
| AA large text | 3:1 | Pass |
| AAA normal text | 7:1 | Pass |
| AAA large text | 4.5:1 | Pass |
| Non-text contrast pair | 3:1 | Pass |
Pass/fail uses the full ratio, never the rounded display. Large text is at least 18 pt (24 CSS px), or 14 pt (about 18.67 CSS px) bold. Non-text results check this pair only; the actual component and adjacent colors still matter.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the Contrast Checker
- 01
Enter a foreground and background in HEX, RGB, or HSL notation.
- 02
If either color contains alpha, set the opaque canvas behind the background.
- 03
Read the normal-text and large-text checks; pass/fail uses the full-precision ratio.
- 04
Swap colors or load a preset, then copy or download the report with its CSS.
Examples
Layered text
For black text with 55% opacity on a pale panel, enter rgb(0 0 0 / .55). The tool composites that text onto the rendered panel before calculating luminance.
Read the right threshold
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 and 4.5:1 respectively. Large means 18 pt regular or 14 pt bold, not simply a heading element. The sample size slider changes the preview only; the table always shows every category.
Transparent surfaces need context
A semitransparent panel changes when its underlying surface changes. This checker composites the background over your selected opaque canvas, then the foreground over that result, using sRGB channel values. Set the canvas to the surface used in your design, and repeat the check for each theme or state.
Common questions
Does a passing pair mean my page is accessible?
No. This checks specified color pairs. Focus indicators, states, images, text size, keyboard behavior, and the rest of the interface require separate review.
Why does a displayed 4.50 sometimes fail?
The ratio shown to two decimal places is for readability. A true ratio below 4.5 fails; the threshold comparison never rounds upward.
Can this measure text over a photograph?
No. Photograph and gradient backgrounds vary spatially. Check the relevant adjacent colors or inspect the rendered page with a suitable accessibility workflow.