WCAG Contrast Checker
Check color contrast ratios for WCAG AA and AAA accessibility compliance
Input & options
Quick presets & examples
Your inputs are never uploaded or stored.
Results
Enter your values to see the result.
About WCAG Contrast Checker
Our free online WCAG contrast checker helps designers, developers, and accessibility professionals verify that text and background color combinations meet the Web Content Accessibility Guidelines (WCAG) 2.1 contrast requirements. Accessible color contrast ensures that all users, including those with low vision or color vision deficiencies, can read and interact with your web content.
The tool calculates the contrast ratio between any two colors using the official W3C relative luminance formula and instantly reports whether the combination passes or fails WCAG AA and WCAG AAA compliance levels for both normal and large text. Results update in real time as you change the colors.
Check a brand color against white before it goes on a button, audit the gray placeholder text on an existing form, or confirm a dark-mode palette still passes: the checker shows the ratio with live text previews and suggests replacement colors when a pair fails.
Understanding WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) are the internationally recognized standard for web accessibility, published by the World Wide Web Consortium (W3C). WCAG defines specific contrast ratio thresholds to ensure text legibility for users with varying levels of visual ability.
- WCAG Level AA (Normal Text): A minimum contrast ratio of 4.5:1 is required. This applies to body text, paragraphs, and any text smaller than 18pt (24px) or 14pt bold (18.66px bold).
- WCAG Level AA (Large Text): A minimum contrast ratio of 3:1 is required. Large text is defined as text that is at least 18pt (24px) or 14pt bold (18.66px bold).
- WCAG Level AAA (Normal Text): A minimum contrast ratio of 7:1 is required. This is the highest level of accessibility conformance for normal-sized text.
- WCAG Level AAA (Large Text): A minimum contrast ratio of 4.5:1 is required for large text at the AAA conformance level.
Meeting at least WCAG AA is considered the baseline standard for accessible web design and is required by many legal frameworks around the world, including the Americans with Disabilities Act (ADA), the European Accessibility Act, and Section 508 of the Rehabilitation Act. WCAG AAA provides an enhanced level of accessibility that is recommended where feasible.
How the Contrast Ratio Is Calculated
The contrast ratio between two colors is determined using the relative luminance of each color, as defined in the WCAG 2.1 specification. Relative luminance measures the perceived brightness of a color on a scale from 0 (darkest black) to 1 (lightest white).
The calculation involves three steps. First, each color channel (red, green, blue) is converted from its 8-bit sRGB value (0-255) to a normalized sRGB value (0-1) by dividing by 255. Second, each normalized value undergoes a gamma correction: if the value is 0.04045 or less, it is divided by 12.92; otherwise, it is transformed using the formula ((value + 0.055) / 1.055) ^ 2.4. Third, the linearized channel values are combined with weighted coefficients: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
The final contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The result is a value ranging from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white).
Key Features
- Real-time contrast ratio calculation using the official W3C WCAG 2.1 luminance formula
- Pass/fail indicators for WCAG AA and AAA conformance levels for both normal and large text
- Interactive color picker and hex input for both foreground and background colors
- One-click color swap to test reversed color combinations
- Ten quick preset color combinations including common accessible pairings
- Live text preview showing how your colors look at normal and large text sizes
- Automatic suggestion of the closest passing foreground color when the current combination fails
- Technical luminance details for both foreground and background colors
- Full dark mode support for comfortable use in any environment
- Results update as you type, with nothing uploaded
How to Use the WCAG Contrast Checker
- Set the foreground color: Click the color picker square or type a hex value (e.g., #1A1A2E) into the text field to set your text or foreground color.
- Set the background color: Similarly, use the color picker or hex input to set the background color behind the text.
- Review results: The contrast ratio and pass/fail results for all four WCAG levels are displayed instantly as you change colors.
- Check live preview: Scroll down to see actual text rendered with your chosen color combination at both normal and large sizes.
- Apply suggestions: If the combination fails WCAG AA, a suggested foreground color is shown. Click Apply to use it.
- Try presets: Use the Quick Presets to test well-known accessible or inaccessible color combinations.
- Swap colors: Click the Swap Colors button to reverse your foreground and background selections.
Why Color Contrast Matters for Accessibility
Approximately 1 in 12 men and 1 in 200 women worldwide have some form of color vision deficiency. Additionally, millions of people experience low vision, age-related vision changes, or situational impairments such as screen glare. Sufficient color contrast is one of the most impactful and straightforward ways to make web content accessible to all of these users.
Poor contrast between text and background is one of the most common accessibility issues found in web audits. By using a WCAG contrast checker during the design and development process, teams can identify and fix contrast issues before they reach production, reducing remediation costs and ensuring compliance with accessibility regulations from the start.
Good color contrast also benefits users without disabilities. It improves readability in bright sunlight, on low-quality displays, and in high-distraction environments. Accessible design is inclusive design that creates a better experience for everyone.
Frequently Asked Questions
What is the difference between WCAG AA and AAA?
WCAG AA is the standard level of conformance recommended for most websites and applications. It requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA is a more stringent level that requires 7:1 for normal text and 4.5:1 for large text. While AAA is not always achievable for all content, it is recommended for critical text elements and where maximum readability is needed.
What counts as large text in WCAG?
According to WCAG 2.1, large text is defined as text that is at least 18 points (approximately 24 CSS pixels) or 14 points (approximately 18.66 CSS pixels) if bold. Large text has lower contrast requirements because its size inherently makes it easier to read.
Does this tool support transparency or alpha channels?
This tool works with opaque hex colors (6-digit hex codes). For colors with transparency, the effective contrast depends on the background behind the transparent layer, which can vary across the page. To check semi-transparent text, you should first calculate the effective flat color resulting from the transparent overlay on its actual background, then test that flat color here.
Is WCAG compliance legally required?
In many jurisdictions, yes. The ADA in the United States, the European Accessibility Act in the EU, the Accessibility for Ontarians with Disabilities Act (AODA) in Canada, and similar legislation in other countries reference or incorporate WCAG 2.1 Level AA as the standard for digital accessibility. Organizations that fail to meet these requirements may face legal action, fines, and reputational damage.