Color Contrast Checker

Test foreground and background colors against WCAG AA and AAA standards. Get the exact contrast ratio and pass/fail status for normal and large text.

Contrast Ratio
4.50 : 1

WCAG Compliance

AA — Normal Text
Requires ≥ 4.5:1
—
AA — Large Text
Requires ≥ 3:1
—
AAA — Normal Text
Requires ≥ 7:1
—
AAA — Large Text
Requires ≥ 4.5:1
—

Preview

The quick brown fox jumps over the lazy dog.
Large Text Sample
Small print: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

About Color Blindness

Note on color blindness: Contrast ratios measure luminance difference and apply to all vision types, but color blindness (protanopia, deuteranopia, tritanopia, achromatopsia) also affects how hues are distinguished. A pair of colors with adequate contrast may still be hard to tell apart for users with color vision deficiencies if they differ only in hue.

Best practice: Never rely on color alone to convey information — pair color with text labels, icons, or patterns. Avoid problematic pairings like red/green or blue/yellow as the sole differentiator.

How to Use the Color Contrast Checker

  1. Enter your foreground color: Input the text or element color as a HEX code, RGB value, or use the color picker to select visually.
  2. Enter your background color: Input the background color using the same methods — HEX, RGB, or visual picker.
  3. Review the contrast ratio: The tool instantly calculates the WCAG contrast ratio between your two colors and displays pass/fail status for AA and AAA compliance levels.
  4. Check normal and large text: The results show separate pass/fail ratings for normal text (under 18pt or 14pt bold) and large text (18pt+ or 14pt+ bold), as WCAG thresholds differ by text size.

Understanding WCAG Color Contrast Standards

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure that text is readable for people with visual impairments, including color blindness and low vision. The contrast ratio is calculated using the relative luminance of the two colors, producing a value between 1:1 (no contrast, identical colors) and 21:1 (maximum contrast, black on white). The formula weighs red, green, and blue channels differently because the human eye perceives green more brightly than red or blue.

WCAG 2.1 defines two conformance levels. Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or larger, or 14pt bold or larger). Level AAA, the highest standard, requires 7:1 for normal text and 4.5:1 for large text. These thresholds are based on extensive research into readability for users with various visual conditions, including the approximately 8% of men and 0.5% of women who have some form of color vision deficiency.

Meeting WCAG contrast requirements is not just about accessibility compliance — it improves readability for all users, especially on mobile devices in bright sunlight or on low-quality displays. Many organizations are legally required to meet WCAG standards under accessibility laws such as the Americans with Disabilities Act (ADA) in the US and the European Accessibility Act. Failing contrast checks is one of the most common WCAG violations found in web audits.

Frequently Asked Questions

What is a WCAG contrast ratio?
It's a number (like 4.5:1) describing the difference in relative luminance between foreground and background colors. WCAG (Web Content Accessibility Guidelines) sets minimum ratios so text remains readable for people with low vision or color blindness. Higher numbers mean more contrast.
What is the difference between AA and AAA?
AA is the standard conformance level and is a common legal baseline (e.g., for accessibility regulations). AAA is the strictest level and not always achievable for all content. For normal body text, AA requires ≥ 4.5:1 and AAA requires ≥ 7:1.
What counts as "large text"?
WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Large text has a lower contrast threshold (3:1 for AA, 4.5:1 for AAA) because thicker strokes are easier to read.
How is the contrast ratio calculated?
Each color's relative luminance is computed from its sRGB red, green, and blue channels (with a gamma correction for dark values). The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 is the darker luminance. Pure black on pure white is 21:1, the maximum.
Does this work for gradients or images?
No — contrast ratios only apply between two solid colors. If text sits on a background image or gradient, you must test the lowest-contrast point manually, or place text on a solid overlay to guarantee readability.
What is a good contrast ratio?
For WCAG AA compliance, aim for at least 4.5:1 for normal text and 3:1 for large text. For AAA compliance, target 7:1 for normal text and 4.5:1 for large text. Pure black on white gives the maximum ratio of 21:1.
Does contrast affect SEO?
Indirectly, yes. Search engines consider user experience signals like bounce rate and time on page. Poor contrast leads to higher bounce rates as users struggle to read content. Additionally, accessibility compliance is increasingly factored into search rankings.
How is the contrast ratio calculated?
The ratio is calculated from the relative luminance of each color. The formula converts RGB values to linear luminance using a gamma correction, then computes (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 is the darker color. This produces values from 1:1 to 21:1.

Related Tools

🎨 Color Picker
HEX / RGB / HSL / HSV
🌈 Color Palette
Generate palettes
🎨 CSS Gradient
Linear & radial