Color Contrast Checker
WCAG AA/AAA contrast ratios — pick foreground and background colors and see pass/fail results instantly.
Sample Heading Text
This is body text shown at normal size. Legibility depends on the contrast ratio between foreground and background colors.
Small UI label at 12px
21.00:1
contrast ratio
AA Normal text
Body text, small UI labels
Requires 4.5:1 · Got 21.00:1
AA Large text
Text ≥18pt or ≥14pt bold
Requires 3:1 · Got 21.00:1
AAA Normal text
Enhanced accessibility standard
Requires 7:1 · Got 21.00:1
AAA Large text
Large text, enhanced standard
Requires 4.5:1 · Got 21.00:1
How this is calculated
Contrast ratio is computed using the WCAG 2.2 relative-luminance formula on the two RGB colors. WCAG AA requires ≥4.5:1 for normal text and ≥3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires ≥7:1 for normal and ≥4.5:1 for large. UI components and graphical elements need ≥3:1 (WCAG 2.2 SC 1.4.11).
Confidence: Exact match for the WCAG 2.2 algorithm. Real-world legibility also depends on font weight, anti-aliasing, and ambient lighting — these aren't captured in a single ratio.
Use this with
Related dev utilities tools
Accessibility & SEO Guide
Why color contrast matters for SEO and user experience
Color contrast is the ratio between the luminance of your text color and its background. Google's quality raters evaluate page accessibility as part of the E-E-A-T framework — poor contrast signals low quality. WCAG compliance is also a legal requirement in many jurisdictions.
WCAG AA: the legal minimum
WCAG AA requires a contrast ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ or 14pt bold). This is the baseline for most accessibility laws including ADA in the US, EN 301 549 in the EU, and AODA in Canada.
WCAG AAA: enhanced accessibility
AAA requires 7:1 for normal text and 4.5:1 for large text. While AAA is not legally required, meeting it significantly improves readability for users with low vision or color blindness — which affects about 8% of men and 0.5% of women.
UI components and focus indicators
Non-text UI elements (buttons, form borders, icons, focus rings) require a minimum 3:1 contrast ratio under WCAG 2.1. This is the most commonly overlooked requirement — thin gray borders on white backgrounds almost always fail.
Contrast and SEO signals
Google's Helpful Content system and Page Experience signals include Core Web Vitals plus user behavior. Poor contrast increases bounce rate (users leave immediately) and reduces time-on-site — both negative engagement signals that correlate with lower rankings.
Color blindness: 8% of male users
Deuteranopia (red-green color blindness) affects around 8% of men. Never rely on color alone to convey meaning — always pair color with text or icons. This also helps your content pass the "grayscale test": remove all color and verify content is still understandable.
Dark mode contrast requirements
Dark mode is used by 82% of developers and a growing share of general users. Test your color palette in both light and dark modes. A color that passes in light mode (dark text on white) may fail in dark mode if you simply invert without recalculating ratios.
Pro Tips
When adjusting colors to pass contrast, work in HSL. Decrease the Lightness value of your text color (or increase it on dark backgrounds) by 5% increments until you pass 4.5:1. This preserves hue and saturation — you get an accessible version of the exact color you want.
Contrast calculators use the mathematical luminance formula, but your actual perceived contrast also depends on font weight and size. A thin 300-weight font at 14px at 4.5:1 will feel harder to read than a 600-weight font at the same ratio. Aim for 5:1+ on thin fonts.
Your monitor's brightness and calibration affect perceived contrast. For final QA, export a PDF of your design and check it on a calibrated or default-settings display. Alternatively, use Chrome DevTools accessibility audit which runs the calculation programmatically.
Frequently Asked Questions
- What is a good color contrast ratio?
- For body text, aim for at least 4.5:1 (WCAG AA) and ideally 7:1 (WCAG AAA). For large text (18px bold or 24px regular), 3:1 is the minimum. For UI components like buttons and form fields, 3:1 is required. The higher the ratio, the more accessible — pure black on white is 21:1, the maximum.
- Does color contrast affect Google rankings?
- Indirectly yes. Google does not read contrast ratios directly, but poor contrast increases bounce rate as users struggle to read content and leave. High bounce rate is a negative engagement signal. Additionally, Google's quality raters evaluate pages for accessibility as part of E-E-A-T assessments.
- What is the difference between WCAG AA and AAA?
- WCAG AA (the standard) requires 4.5:1 contrast for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal and 4.5:1 for large text. AA is the legal requirement in most countries. AAA is the gold standard but not always achievable with branded color palettes.
- How do I fix a failing contrast ratio?
- The easiest fix is to darken the text color (or lighten it on dark backgrounds) until the ratio passes. Do not change the background color if it is part of your brand identity. If you must keep both colors exact, increase the font size to 18pt+ or use bold weight — large text has a lower threshold (3:1 vs 4.5:1).