Color Contrast Checker
Check contrast ratio between foreground and background colors for accessibility.
Sufficient colour contrast between text and background is a legal accessibility requirement under WCAG 2.1 and a practical necessity for readability. This checker calculates the contrast ratio between any two colours and grades them against AA and AAA standards for both normal and large text.
Aa Sample text
Contrast result will appear here...
How to Check Colour Contrast for Accessibility
- Enter the foreground (text) colour — use a hex code, RGB value, or colour picker.
- Enter the background colour — the colour behind the text.
- View the contrast ratio — the tool calculates the ratio and checks against WCAG 2.1 guidelines.
- Adjust until compliant — aim for 4.5:1 for normal text (AA) or 7:1 for enhanced contrast (AAA).
Frequently Asked Questions
What is a colour contrast ratio? ▼
The contrast ratio measures the difference in luminance between two colours, expressed as a ratio from 1:1 (no contrast, e.g., white on white) to 21:1 (maximum contrast, black on white). It is calculated using the relative luminance formula defined in WCAG 2.1.
What contrast ratio do I need for WCAG compliance? ▼
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most accessibility laws reference Level AA as the minimum standard.
Why does colour contrast matter for accessibility? ▼
Approximately 300 million people worldwide have colour vision deficiency, and many more have low vision or age-related sight changes. Poor contrast makes text difficult or impossible to read for these users. Good contrast benefits everyone, especially in bright sunlight or on low-quality screens.
What is WCAG? ▼
WCAG (Web Content Accessibility Guidelines) is the international standard for making web content accessible to people with disabilities. Published by the W3C, it covers contrast, navigation, screen reader compatibility, and more. WCAG 2.1 is the current widely-adopted version.
Can I use light grey text on a white background? ▼
Only if the grey is dark enough. Light grey (#999999) on white (#FFFFFF) has a contrast ratio of only 2.85:1, which fails WCAG AA. You would need at least #767676 (4.54:1) to pass AA for normal text. This tool helps you find the exact threshold.
Is my data stored? ▼
No. All calculations happen in your browser. No colour values are sent to any server.