04 · Accessibility
WCAG contrast checker. Can everyone read this?
Colors
Contrast ratio
15.41 : 1
Normal · AA
Pass≥4.5
Normal · AAA
Pass≥7.0
Large · AA
Pass≥3.0
Large · AAA
Pass≥4.5
UI · AA
Pass≥3.0
This pair passes every AA requirement.
Live preview
Heading: the quick brown fox
Body text at 14px. Good typography depends on enough contrast between ink and paper. WCAG asks for 4.5:1 on normal text and 3:1 on large text.
An inline text linkForm label
Card content
Borders and panels at 3:1.
Large text = 18.66px+ bold or 24px+. UI = icons, borders and control states.
Color-blindness simulation
Approximate: verify with real usersText sample Aa
Ratio 15.41:1 unaffected by hue
Text sample Aa
Ratio 15.41:1 unaffected by hue
Text sample Aa
Ratio 15.41:1 unaffected by hue
Text sample Aa
Ratio 15.41:1 unaffected by hue
Contrast ratios don't change under simulation, but hue-dependent meaning (red = error, green = success) can disappear. Pair color with labels and icons.
Guide
Which WCAG level do I need?
The Web Content Accessibility Guidelines (WCAG) define contrast as a ratio between 1:1 and 21:1, where the first number is the lighter color and 21:1 is pure black on pure white. Level AA — the conformance level required by most laws, procurement processes and platform review guidelines — demands 4.5:1 for normal body text and 3:1 for large text (24px, or 18.66px when bold).
Level AAA raises those to 7:1 for normal text and 4.5:1 for large text. Separately, success criterion 1.4.11 requires 3:1 for non-text elements: icon strokes, input borders, focus rings and other UI components that must stay visible. This checker grades your pair against all of those thresholds at once, so you can see exactly which level your color combination earns.
Fixing a failing contrast ratio
Lightness is the lever that moves the ratio — hue barely matters. If the text fails, darken it or lighten the background until the ratio clears your target; the auto-fix on this page suggests the nearest passing color while keeping the original hue, and shows the before-and-after pair for copy or one-click apply.
Color-blindness simulation is the second check. Contrast ratios do not change under simulated vision, because luminance stays the same, but meaning carried by hue alone — red for errors, green for success — can disappear entirely. Pair every color signal with a label, icon or pattern, then re-run the pair against each surface your design uses, including hover, disabled and dark mode states.
How to check color contrast
- Enter the foreground (text) color and background color in HEX, RGB or HSL.
- Read the contrast ratio and the AA / AAA pass-fail cards for normal and large text.
- Apply an auto-fix suggestion when the pair fails, or preview it in the UI samples.
- Re-test every state the pair appears in — hover, disabled, and dark mode surfaces.
Frequently asked questions
- What contrast ratio does WCAG AA require?
- WCAG AA requires 4.5:1 for normal text, 3:1 for large text (24px, or 18.66px bold), and 3:1 for non-text UI components such as icons and input borders under criterion 1.4.11.
- What does a 4.5:1 contrast ratio mean?
- It is the luminance ratio between the lighter and darker color. At 4.5:1 the text is considered readable at typical body sizes; the scale runs from 1:1 (identical colors) to 21:1 (pure black on pure white).
- Does large text have a different contrast requirement?
- Yes. WCAG defines large text as 24px and up, or 18.66px and up when bold, and only requires a 3:1 ratio for it. Anything smaller needs the full 4.5:1 under level AA.
- Does color blindness change contrast ratios?
- No — simulated color blindness keeps luminance, so the numeric ratio is unchanged. What can break is meaning carried by hue alone, so always reinforce color signals with text or icons.