WCAG Contrast Checker — Verify Color Accessibility Online
Understanding the Basics
Color contrast accessibility is a legal and ethical requirement for web content under the Web Content Accessibility Guidelines (WCAG), published by the W3C. Approximately 8% of males and 0.5% of females have some form of color vision deficiency (color blindness), and millions more have low vision, cataracts, or use screens in bright sunlight — all conditions that require sufficient contrast between text and background colors to remain readable. WCAG 2.1 defines contrast ratios on a scale from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — pure black on pure white). Compliance levels are: Level AA (the legal standard in most jurisdictions) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt / 14pt bold and above). Level AAA (enhanced accessibility) requires 7:1 for normal text and 4.5:1 for large text. The contrast ratio is calculated using the relative luminance formula from WCAG: L = 0.2126 × R + 0.7152 × G + 0.0722 × B (after gamma correction), where the ratio is (L1 + 0.05) / (L2 + 0.05). Understanding and passing contrast requirements is essential for ADA compliance (United States), EN 301 549 (European Union), and AODA (Canada) and helps all users in all viewing conditions. Our tool calculates WCAG 2.1 contrast ratios and checks against AA and AAA requirements for both normal and large text.
How to Use the Tool
- Enter the foreground (text) color and background color using HEX, RGB, or the color picker.
- The contrast ratio is calculated instantly using the WCAG 2.1 relative luminance formula.
- The result shows whether your combination passes WCAG AA (4.5:1 normal / 3:1 large) and AAA (7:1 normal / 4.5:1 large).
- A live preview shows sample text in your chosen colors for visual confirmation.
- Use the "Suggest" button to find the nearest passing color variant if your combination fails.
Key Features & Specifications
- Calculates WCAG 2.1 contrast ratio using the official luminance formula with gamma correction
- Tests against both AA (4.5:1 / 3:1 large) and AAA (7:1 / 4.5:1 large) compliance levels
- Live text preview showing normal text, large text, and UI component samples
- Color blindness simulation: previews how the color pair appears with Deuteranopia, Protanopia, and Tritanopia
- Nearby passing color suggestions when a combination fails WCAG requirements
Frequently Asked Questions (FAQ)
- Q:What counts as "large text" for WCAG contrast purposes?
- WCAG defines large text as text that is at least 18 points (24 CSS pixels) in regular weight, or at least 14 points (approximately 18.67 CSS pixels) in bold weight. Large text has a relaxed contrast requirement (3:1 for AA, 4.5:1 for AAA) because it is inherently easier to read.
- Q:Does WCAG contrast apply to placeholder text and disabled elements?
- WCAG 1.4.3 explicitly exempts: placeholder text in form inputs (but best practice is to meet contrast anyway), disabled UI components (which are understood to be non-interactive), and decorative images and text with no informational purpose.
- Q:Is the WCAG 2.1 contrast algorithm accurate for all types of color deficiency?
- The WCAG contrast algorithm is designed for luminance (perceived brightness) contrast, not for hue distinction. Two colors with identical luminance but different hues will have a 1:1 contrast ratio even though color-normal individuals see them as different. This means the WCAG formula does not directly assess color blindness accessibility — use our color blindness simulation to verify hue independence as well.