What this page does
It measures the WCAG contrast ratio between the text color and the background. A higher ratio is easier to read. The number comes from relative luminance, not from how vivid the pair looks. Two bright colors can still fail when their luminance is close. Type the colors, pick a preset, or drop a screenshot and click the text, then the background. That click reads one pixel in the browser.
The grades follow WCAG 2.2. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Interface parts, such as a button border, a form field, or an icon, need 3:1 against the color next to them. That interface rule has no AAA grade.
How the ratio is calculated
Relative luminance starts from the sRGB channels. A channel at or below 0.04045 is divided by 12.92. A channel above that becomes ((channel + 0.055) / 1.055) raised to 2.4. Luminance is then 0.2126 R + 0.7152 G + 0.0722 B. The contrast ratio is (lighter + 0.05) / (darker + 0.05). It runs from 1:1 to 21:1.
This page asks chroma.js for that ratio. Smart Fix does not treat an OKLCH lightness number as a pass. It keeps hue and chroma, steps lightness on the text or the background, and stops at the smaller change that reaches 4.5:1. The color it writes is the sRGB color a screen can show, and the ratio is measured on that color.
What the grades are for
- The ratio runs from 1:1, the same color twice, to 21:1, black on white.
- Large text means 18pt regular, about 24px, or 14pt bold, about 18.66px.
- Changing lightness is the direct way to move a failing pair. Changing only the hue can leave the ratio almost where it was.
- A passing OKLCH lightness is not, by itself, a passing ratio. This page measures the ratio.
How to use this page
- Choose a preset, type both colors, or use the swatches. You can also drop or paste a screenshot, then click the text color and the background. Swap exchanges the two fields.
- On a screenshot, Text and Background show which color the next click writes. Choose one again to replace only that color.
- Read the ratio, then look at the heading, body, caption, button, and link in the preview.
- Check the rows you actually use: normal text, large text, interface parts, and AAA when you want the stricter grade.
- If normal text fails AA, choose Smart Fix. It keeps hue and chroma, and changes whichever lightness needs the smaller step until the pair reaches 4.5:1.
- Copy link, next to Copy CSS, copies an address for these two colors. A screenshot stays in the browser.
Pairs measured on this page
These ratios come from chroma.js, the same method as the checker. The opening pair, #F4F7F8 on #14324A, is 12.31:1.
Ink on paper
#14151F on #F2EEE3 is 15.66:1. Normal text passes AAA.
color: #14151F;
background: #F2EEE3;Cobalt on white
#3458AC on white is 6.69:1. Normal text passes AA and fails AAA.
color: #3458AC;
background: #FFFFFF;Gold on white
#EBC573 on white is 1.64:1. It fails AA for text and for interface parts. The same gold on #14151F is 11.04:1. OKLCH vs HSL vs RGB measures a related case: pure yellow on white is 1.07:1.
color: #EBC573;
background: #FFFFFF;Easy mistakes
- Trusting a bright pair because it looks bold. Gold on white is the example above.
- Clicking the edge of a letter in a screenshot. Antialiasing mixes the text and the background in that pixel. Click the solid part of each.
- Checking only pure white when the real background is off-white, a surface, or a photo.
- Skipping the 3:1 rule for a button edge, a field border, or an icon.
- Treating a disabled control as a reason to ship a faint default. Disabled controls are exempt. They still have to be recognizable.
Questions
Can I sample a screenshot?
Yes. Drop, paste, or choose a PNG, JPEG, WebP, or GIF. Click the text color, then the background. Text and Background show which click you are writing. Choose one again to replace only that color. The picture stays in the browser.
What ratio should I aim for?
4.5:1 for normal text, 3:1 for large text and for interface parts. 7:1 is the AAA grade for normal text.
What is the difference between AA and AAA?
AA is the grade most interfaces use. AAA is stricter. This page shows both. AAA does not add a second grade for interface parts.
What counts as large text?
18pt or larger at a regular weight, or 14pt or larger in bold. In pixels that is about 24px regular and 18.66px bold.
Why does a bright color fail on white?
Its luminance is close to white, even when the hue is strong. Darken the text, or put the bright color on a dark background. Smart Fix changes only lightness, on the text or the background, and keeps the smaller step.
Do disabled controls have to pass?
No. WCAG exempts inactive controls. A control that disappears into the background is still hard to use.