Color Contrast Checker
Pick a text and background color and instantly see the WCAG contrast ratio, AA/AAA pass/fail results and a live preview of how the combination reads.
Large heading preview
This is normal body text at the selected colors, so you can judge readability directly.
WCAG 2.1 thresholds: 4.5:1 (AA), 3:1 (AA large ≥18pt/14pt bold), 7:1 (AAA), 4.5:1 (AAA large).
Try next
Your files are processed locally in your browser. They are not uploaded to our servers.
How to use
- Pick or type the text color and the background color.
- Read the contrast ratio and the AA/AAA results for normal and large text.
- Adjust the colors until all required checks pass.
What is this tool?
Color Contrast Checker computes the WCAG 2.1 contrast ratio between two colors using the official relative-luminance formula, and grades it against all four thresholds: AA and AAA, each for normal and large text. A live preview shows real text in your chosen colors so you can judge readability directly. Sufficient contrast is a legal accessibility requirement in many jurisdictions and matters for every user in bright sunlight.
Common uses
- Verifying a design system's text/background pairs meet WCAG AA
- Checking brand colors for accessibility before a website launch
- Fixing low-contrast warnings from Lighthouse or axe audits
- Choosing a readable text color for a given background
FAQ
What ratio do I need to pass?
AA requires 4.5:1 for normal text and 3:1 for large text (≥18pt, or 14pt bold). AAA raises this to 7:1 and 4.5:1 respectively.
What counts as large text?
Text at 18pt (about 24px) or larger, or bold text at 14pt (about 18.5px) or larger.
Does this cover WCAG 3 / APCA?
No, this tool implements the WCAG 2.1 formula, which is what current legal standards and audit tools reference.
Can I check colors with transparency?
No, the ratio is defined for solid colors. Flatten any transparency against its real background first.