Contrast Checker
The Contrast Checker calculates the WCAG 2.1 contrast ratio between a text color and a background color and shows whether the pair passes AA and AAA for normal and large text.
About this tool
The Contrast Checker calculates the WCAG 2.1 contrast ratio between a text color and a background color and shows whether the pair passes AA and AAA for normal and large text.
How to use it
- Enter or pick the text color.
- Enter or pick the background color (hex values work, including 3-digit shorthand).
- Read the contrast ratio and the AA/AAA results for normal and large text.
- Adjust either color until the level you need passes.
Good to know
- WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- WCAG 2.1 AAA requires at least 7:1 for normal text and 4.5:1 for large text.
- Large text means at least 18 pt (24 px) regular or 14 pt (about 18.66 px) bold.
- Contrast ratios range from 1:1 (identical colors) to 21:1 (black on white).
- The ratio is computed from the relative luminance of each color, per the WCAG formula.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
What contrast ratio is required for accessibility?
For WCAG 2.1 level AA, normal text needs at least 4.5:1 and large text at least 3:1. Level AAA raises this to 7:1 and 4.5:1.
Is white text on green accessible?
It depends on the shade. Many bright greens fail AA with white text; darker greens usually pass. Enter your exact hex values to check.
What counts as large text in WCAG?
Text that is at least 18 point (24 px) in regular weight, or at least 14 point (about 18.66 px) in bold.
Does WCAG contrast apply to buttons and icons?
WCAG 2.1 success criterion 1.4.11 asks for at least 3:1 contrast for user-interface components and meaningful graphics against their surroundings.