Color Contrast Checker — WCAG AA & AAA
Pick foreground and background colors to instantly check your contrast ratio against WCAG AA and AAA standards for normal text, large text, and UI components. Runs entirely in your browser — no signup required.
The quick brown fox jumps over the lazy dog. (Normal text — 16px)
The quick brown fox jumps. (Large text — 24px bold)
Button label (UI component)
How the Color Contrast Checker Works
- 1Click the color swatch to open the native color picker, or type a hex value directly into the input field (e.g.
#1a1a2e). - 2Set both foreground (text/icon colour) and background colours — use the swap button to quickly reverse them.
- 3The preview panel shows your colours applied to normal text, large text, and a UI button in real time.
- 4The results panel shows the contrast ratio and Pass/Fail for every WCAG AA and AAA criterion simultaneously.
WCAG Contrast Ratio Thresholds
The contrast ratio is calculated using the WCAG relative luminance formula — a weighted combination of linearised RGB values that models human perception of brightness. A ratio of 1:1 means identical colours; 21:1 is black on white. The thresholds below define what counts as accessible under the international standard.
Practical Tips for Meeting Contrast Requirements
Test at actual font size
The large text threshold (18px+ or 14px+ bold) applies to the rendered size, not the CSS value. A 14px bold font meets the large text definition; a 16px regular weight does not. Check the actual computed size in browser DevTools before applying the lower threshold.
Don't forget placeholder text
Placeholder text in form inputs is typically rendered at reduced opacity, which almost always fails AA. Style placeholder text at full opacity with a contrasting colour rather than using opacity reduction. It is frequently missed in accessibility audits.
Check focus indicators too
Keyboard focus outlines must also meet the 3:1 UI component threshold against the adjacent background. The default browser focus ring is often removed by CSS resets without a replacement — a common accessibility failure. Your focus indicator colour needs to pass the same contrast check as other UI components.
Disabled elements are exempt
WCAG explicitly exempts disabled UI components from contrast requirements — the standard acknowledges that disabled state intentionally communicates unavailability. However, consider using a visible "disabled" label or pattern rather than relying solely on low contrast, as users with cognitive disabilities may not interpret low contrast as "disabled."
Logos and decorative images are exempt
WCAG does not require logos, brand marks, or purely decorative images to meet contrast thresholds. Text within logos is also exempt. However, if a logo contains information (like a phone number or URL), that text does need to meet contrast requirements.
Aim for AAA on body copy
While AA (4.5:1) is the legal baseline, body text benefits significantly from AAA (7:1) contrast. The difference is visible to all users in suboptimal conditions — bright sunlight, ageing displays, or tired eyes. Black (#000) on white (#fff) achieves 21:1; dark grey (#1a1a2e) on white still exceeds 7:1.
Frequently Asked Questions
What is WCAG and why does contrast ratio matter?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. Contrast ratio defines how distinguishable foreground content (text, icons) is from its background. Users with low vision, colour blindness, or those viewing screens in bright sunlight rely on sufficient contrast to read content. WCAG sets minimum ratios to ensure interfaces are usable across a wide range of visual abilities.
What is the difference between WCAG AA and AAA?
AA is the standard compliance level required by most accessibility legislation (including WCAG 2.1 Level AA, ADA, and EN 301 549). It requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is aspirational — not all content can meet it, and it is not legally required for most use cases. Aim for AA as a minimum; exceed it where possible.
What counts as "large text" for WCAG?
WCAG defines large text as 18pt (24px) or larger for regular weight text, or 14pt (approximately 18.67px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because it is inherently easier to read at lower contrast due to its size.
What contrast ratio is required for UI components and icons?
WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a minimum 3:1 contrast ratio for UI components — buttons, input borders, checkboxes, icons — against their adjacent colours. This applies to the visual boundaries that identify the component, not to decorative elements. The checker evaluates this against the same 3:1 threshold as large text.
How is the contrast ratio calculated?
The WCAG contrast ratio formula uses relative luminance. Each hex colour is converted to linearised sRGB values, then combined as: L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour. The result ranges from 1:1 (identical colours) to 21:1 (black on white). All calculation is done in your browser — no data is sent to any server.
Does this tool check colour blindness or only contrast?
This tool checks luminance contrast ratio only, which is the WCAG-specified metric. It does not simulate colour blindness (deuteranopia, protanopia, etc.). Passing contrast ratio is necessary but not sufficient for full colour accessibility — you should also avoid using colour as the only means of conveying information. For colour blindness simulation, use a dedicated tool like Coblis.
Does passing WCAG AA mean my site is fully accessible?
No. Passing colour contrast is one requirement among many. WCAG 2.1 Level AA covers keyboard navigation, screen reader compatibility, text alternatives for images, caption for video, and dozens of other criteria. Contrast compliance is a necessary part of accessibility, not the whole of it.