Color Contrast Checker
100% PrivateColor & Design ToolsMeasure a text and background color pair against WCAG contrast ratios for accessibility.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
Large sample text at 16.71:1
Normal sample text: the quick brown fox jumps over the lazy dog. Readability is judged against the WCAG 2.1 thresholds below.
| Level | Normal text | Large text |
|---|---|---|
| WCAG AA | PASS needs 4.5:1 | PASS needs 3:1 |
| WCAG AAA | PASS needs 7:1 | PASS needs 4.5:1 |
Large text means at least 18pt, or 14pt bold. Ratios use the WCAG 2.1 relative luminance formula.
- 1Enter the text color and the background color.
- 2Read the ratio and the preview at the top of the results.
- 3Check the AA and AAA rows for your text size.
- 4Use Swap colors to test the inverse pairing.
#2563EB on #FFFFFF measures 5.17:1. It passes WCAG AA for normal text (needs 4.5:1) and AAA for large text (needs 4.5:1), but fails AAA for normal text, which needs 7:1.
- Ratios follow WCAG 2.1 exactly; WCAG 3 drafts use a different model (APCA) and can judge the same pair differently.
- Large text means at least 18pt, or 14pt bold; everything smaller counts as normal text.
- Contrast is only one part of readability: thin font weights and small sizes can still be hard to read at a passing ratio.
AA is the level most laws and procurement rules reference: 4.5:1 for normal text and 3:1 for large text. AAA (7:1 and 4.5:1) is stricter and worth choosing for body text when the design allows it.
About this tool
The Color Contrast Checker measures a text color against a background color with the WCAG 2.1 relative luminance formula and reports pass or fail for AA and AAA, for normal and large text. It is the check to run before shipping a color pair in an interface, a slide deck or a document.
Related tools
Part of Ovatly's free tools in Color & Design Tools.