Color Contrast Checker
Check WCAG color contrast ratios for accessibility
Sample Heading Text
This is how your body text will appear with this color combination. The quick brown fox jumps over the lazy dog.
Small text like captions or labels.
AA Normal Text
Min 4.5:1
AA Large Text
Min 3:1
AAA Normal Text
Min 7:1
AAA Large Text
Min 4.5:1
About Color Contrast Checker
Color Contrast Checker is a free online tool that calculates the contrast ratio between a text colour and a background colour and evaluates it against WCAG (Web Content Accessibility Guidelines) accessibility standards. Enter your foreground and background colours — the tool shows the contrast ratio and whether it meets WCAG AA and AAA thresholds for different text sizes.
Web accessibility means designing for all users, including the approximately 300 million people worldwide with colour vision deficiency and the 2.2 billion with some form of visual impairment. Insufficient colour contrast is one of the most common and most impactful accessibility failures on the web — text that looks fine to someone with normal vision can be completely unreadable to someone with low vision, colour blindness, or when viewed on a low-quality screen in bright sunlight.
The WCAG contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. The ratio ranges from 1:1 (no contrast, same colour) to 21:1 (maximum contrast, black on white). WCAG 2.1 defines two compliance levels for text contrast: Level AA (minimum) requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text.
In many countries, web accessibility is a legal requirement. The Americans with Disabilities Act (ADA) in the US, the Equality Act in the UK, and the Rights of Persons with Disabilities Act in India all mandate accessible digital content for public-facing websites and applications. Non-compliance carries legal risk. Checking colour contrast before publishing is a simple, high-impact step toward accessibility compliance.
How to Use Color Contrast Checker
- 1Enter the foreground (text) colour in HEX or RGB
- 2Enter the background colour in HEX or RGB
- 3View the contrast ratio and WCAG AA/AAA pass/fail results
- 4Try different colour combinations until you achieve the required contrast
- 5Use the suggested accessible alternatives if your combination fails
Frequently Asked Questions
4.5:1 for normal-sized text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AA is the standard minimum requirement for most accessibility compliance obligations.
WCAG (Web Content Accessibility Guidelines) is an internationally recognised standard published by the W3C that defines how to make web content accessible to people with disabilities. The current version is WCAG 2.1, with WCAG 2.2 as the latest update. Most legal accessibility requirements reference WCAG 2.1 Level AA compliance.
Darken the text colour or lighten the background (or vice versa) until the ratio passes. For brand colours that cannot be changed, use them for non-text elements (borders, icons, backgrounds) and choose an accessible text colour that works with them. White (#FFFFFF) on a dark brand colour or black (#000000) on a light brand colour often passes.
WCAG 1.4.11 (Non-text Contrast) requires a 3:1 contrast ratio for UI components (buttons, form fields, focus indicators) and informational graphics against adjacent colours. This is a WCAG AA requirement and is separate from the text contrast ratio requirement.
You might also like
Try next