How to Use the WCAG Color Contrast Checker
- Choose a foreground (text) color and a background color using the color pickers or by typing HEX (e.g. #1f47f5) or RGB (e.g. rgb(31,71,245)) values.
- The contrast ratio updates instantly on a 1–21 scale, with live previews of normal and large text in both colors.
- Read the pass/fail badges for WCAG AA and AAA at normal text (≥4.5:1 / ≥7:1) and large text (≥3:1 / ≥4.5:1), and adjust the colors until your target grade passes.
What Is WCAG Color Contrast Checker?
Color contrast in web accessibility means the perceived luminance difference between foreground text and its background. The WCAG 2.1 contrast ratio is computed from relative luminance — a value derived from each color’s sRGB channels, weighted to approximate human perception — and ranges from 1:1 (white on white) to 21:1 (black on white).
The Web Content Accessibility Guidelines define four thresholds. For normal text (under 18pt, or under 14pt bold), AA requires a ratio of at least 4.5:1 and AAA at least 7:1. For large text (18pt+, or 14pt+ bold), AA requires 3:1 and AAA requires 4.5:1. AA is the legal benchmark referenced by accessibility regulations such as the European Accessibility Act and Section 508-style requirements; AAA is the recommended target for body text on primary content.
Contrast matters because low-vision users, people with color vision deficiencies, and anyone using a screen in bright ambient light all rely on luminance separation rather than hue to read. Light gray placeholder text on white, muted captions and disabled-looking buttons are the most common failures in audits — designs that look elegant on a high-DPI monitor can fail badly for real users.
Automated scanners (Lighthouse, axe) flag contrast failures, but fixing them is a design loop: darken or lighten one color, re-check, repeat. A live checker with real-text preview and both-direction swaps makes that loop fast and keeps designers and developers speaking the same language.
Common Use Cases
- Website and landing page design. Verify body copy, headings and links against brand backgrounds before shipping marketing pages.
- Admin dashboards and SaaS UIs. Check tables, muted helper text, badges and form labels — the elements most likely to fail AA in dense interfaces.
- Mobile app development. Validate text colors for iOS and Android screens where ambient-light conditions make contrast even more important.
- Accessibility audits and remediation. Reproduce Lighthouse or axe contrast findings and iterate colors until the failing elements pass AA or AAA.
- Design system tokens. Lock down accessible color pairings as design tokens so component variants ship pre-approved for contrast.
Frequently Asked Questions
What contrast ratio should I target?
Aim for at least 4.5:1 for normal-size text (WCAG AA) and 7:1 for AAA. Large text (18pt and up, or 14pt bold) only needs 3:1 for AA and 4.5:1 for AAA. Most accessibility regulations reference AA as the minimum.
How is the contrast ratio calculated?
Each color is converted to relative luminance using the WCAG formula (sRGB channels linearized and weighted: 0.2126 R + 0.7152 G + 0.0722 B). The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.
Does this tool check non-text elements?
It focuses on text contrast, which has the 4.5:1/3:1 thresholds. WCAG also requires meaningful graphical objects and UI components (icons, input borders) to reach 3:1 against adjacent colors — use the ratio display to judge those as well.
Can I enter RGB instead of HEX?
Yes. Both color fields accept HEX (#3366ff), rgb() and hsl() notation, or you can use the built-in color picker. Swapping foreground and background is one click.
Are my colors uploaded anywhere?
No. The luminance math runs in your browser as you type. No color values, page content or personal data are transmitted, stored or tracked.