Nookbyte Color contrast checker
Check text and background colors against WCAG 2.2 for AA and AAA, and get the nearest color that passes without changing the hue. It all runs in your browser.
Use a hex code like #1a2b3c, rgb(), hsl(), oklch() or a color name.
Use a hex code like #1a2b3c, rgb(), hsl(), oklch() or a color name.
Contrast ratio
Large text looks like this
Normal text at 16 pixels looks like this. Read it at arm's length to judge it on a real screen.
- Normal textAA4.5:1Pass
- Normal textAAA7:1Pass
- Large textAA3:1Pass
- Large textAAA4.5:1Pass
- Icons and controlsAA3:1Pass
Large text is at least 24 px, or 18.7 px bold (18 pt, or 14 pt bold).
Text lightness
Drag to change only the lightness of the text color. The hue stays the same. The marks show where the contrast with the background reaches 3:1, 4.5:1 and 7:1.
- 4.5:1 or more, all text
- 3:1 to 4.5:1, large text, icons and controls
- Under 3:1
Nearest colors that pass
Preview
Large heading, 24 px
Body text at 16 px with a link in it. Most of a page is text like this, so it needs 4.5:1 for AA.
Small print at 14 px is harder to read and needs the same 4.5:1.
How to check color contrast
- Type or pick the text color and the background color. Hex, rgb(), hsl(), oklch() and color names all work, and the eyedropper picks a color from anywhere on your screen in Chrome and Edge.
- Read the ratio and the pass or fail for each WCAG level.
- If it fails, drag the lightness rail, or use one of the nearest passing colors.
- Copy the page address to share the same pair.
WCAG 2.2 contrast requirements
| What | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text, 24 px or 18.7 px bold | 3:1 | 4.5:1 |
| Icons, borders and parts of controls | 3:1 | None |
Text rules come from success criteria 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced). The 3:1 rule for icons and controls is 1.4.11 Non-text Contrast. Logos, decorative images and disabled controls are exempt.
How the ratio is calculated
This checker uses the formulas in the WCAG 2.2 definitions of contrast ratio and relative luminance, exactly as written:
ratio = (L1 + 0.05) / (L2 + 0.05)
L = 0.2126 R + 0.7152 G + 0.0722 B
R = R8bit/255 ≤ 0.04045 ? R/12.92 : ((R + 0.055)/1.055)^2.4
L1 is the lighter color and L2 the darker one, so the ratio runs from 1:1 to 21:1. For example, #777777 on white is 4.48:1, just short of AA for normal text.
Questions
What contrast ratio do I need?
For WCAG 2.2 level AA, normal text needs at least 4.5:1 and large text at least 3:1. Level AAA asks for 7:1 and 4.5:1. Icons, input borders, focus rings and other parts of controls need 3:1 against the colors next to them (success criterion 1.4.11, level AA).
What counts as large text?
WCAG defines large text as at least 18 point, or 14 point bold. On the web that is about 24 CSS pixels, or about 18.7 pixels bold.
My ratio is 4.48:1. Is that close enough to 4.5:1?
No. WCAG thresholds are exact minimums, so 4.48:1 fails AA for normal text. This checker never rounds a ratio up onto a threshold: 4.499 shows as 4.49 and fails.
How does the nearest passing color work?
It converts your color to OKLCH, a color space where lightness matches what people see, and changes only the lightness. The hue stays the same, and the chroma drops only when the color would fall outside what screens can show. It then picks the passing color closest to yours, on the darker or lighter side.
Can I check transparent colors?
Yes. Type a color with transparency, such as #14213d99 or rgb(20 33 61 / 60%). Transparent text is blended with the background before it is measured. A transparent background is blended with white, which is what WCAG assumes when no background is set.
Does it check APCA or WCAG 3?
No. APCA is a newer method proposed for a future WCAG 3, which is still a draft. Laws and procurement rules usually point to WCAG 2.1 or 2.2, and this checker follows WCAG 2.2.
Are my colors sent anywhere?
No. Everything is worked out in your browser. The colors appear in the page address only so you can share a link to the same pair.