Contrast Checker
Check color contrast ratios for WCAG compliance.
Why use this solution
- Calculate precise contrast ratios between text and background colors
- Instant verification of WCAG 2.1 AA and AAA compliance for normal and large text
- Real-time visual preview of the selected color combination to assess legibility
Who uses this
- UI/UX designers checking color palettes for accessibility before preparing style guides
- Frontend developers verifying contrast ratios during the implementation of style tokens
- Accessibility engineers auditing site pages to comply with legal compliance standards
Configure inputs and click Run
How It Works & Educational Guide
How Nexifr's Contrast Checker helps you identify and fix accessibility problems — covering WCAG criteria, colour contrast ratios, and screen reader compatibility.
01WCAG 2.1 Color Contrast Guidelines
The Web Content Accessibility Guidelines (WCAG) specify that text must have sufficient contrast against its background to remain readable for users with visual impairments: • Level AA: Minimum contrast ratio of 4.5:1 for normal text, and 3:1 for large text. • Level AAA: Enhanced contrast ratio of 7:1 for normal text, and 4.5:1 for large text.
02The Relative Luminance Mathematical Formula
Luminance is calculated using the relative brightness of a point in a color space, normalized between 0 (black) and 1 (white). The contrast ratio is calculated as `(L1 + 0.05) / (L2 + 0.05)`, where L1 is the lighter color and L2 is the darker color.
03Designing for AA and AAA Compliance
Our contrast tool calculates the exact ratio and provides instant Pass/Fail indicators for both AA and AAA standards, helping designers and developers build accessible digital interfaces.
Frequently Asked Questions
What are the WCAG contrast ratio requirements?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal-sized 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. Most websites target AA compliance as the legal and industry standard.
What is a good contrast ratio for accessibility?
A contrast ratio of 4.5:1 or higher passes WCAG AA for body text — the standard required by most accessibility laws (ADA, EN 301 549, AODA). For decorative text, icons, or disabled UI elements, contrast requirements do not apply. Aim for 7:1 or higher (AAA) for the best readability for users with low vision.
How is color contrast ratio calculated?
The contrast ratio is calculated using the WCAG relative luminance formula. Each colour's RGB values are converted to linear light values, then combined into a single luminance number. The ratio is expressed as L1+0.05 / L2+0.05 where L1 is the lighter colour. A ratio of 1:1 means identical colours; 21:1 is maximum contrast (black on white).
Does color contrast affect SEO?
Not directly as a ranking factor, but poor contrast hurts accessibility scores, increases bounce rates (users leave unreadable pages faster), and may affect Core Web Vitals through engagement metrics. Additionally, failing accessibility guidelines can expose businesses to legal risk under ADA and similar legislation.