WCAG Color Contrast Checker
Enter a text color and a background color to get the exact contrast ratio and see whether it passes WCAG AA and AAA for normal text, large text, and UI components. One click auto-fixes failures.
Text Color (Foreground)
Background Color
Visual Sample Previews
The Crucial Role of Color Contrast in Modern Design
Web accessibility (often abbreviated as a11y) ensures that digital services can be navigated, read, and understood by everyone, including individuals with low vision, color blindness, or age-related vision degeneration. Color contrast represents one of the most common design failures on the internet, directly affecting readability and search index crawling optimization.
When foreground text does not contrast sufficiently with the background, reading comprehension drops drastically. This affects users not only with clinical visual impairments but also users viewing screens under direct sunlight or using screens in power-saving low-brightness configurations. CyberScryb's WCAG Color Contrast Checker calculates the precise mathematical contrast between text components to guarantee universal readability.
Understanding WCAG 2.1 & 2.2 Standards
The Web Content Accessibility Guidelines (WCAG) categorize design compliance into three main levels: A (minimal), AA (mid-level / industry standard), and AAA (highest criteria). Here is how color contrast thresholds are defined:
- WCAG AA Compliance: Normal text elements require a minimum contrast ratio of 4.5:1. Large text (defined as 18pt/24px or larger, or 14pt/18.67px bold or larger) requires a 3.0:1 ratio. Graphical elements and UI controls also require a 3.0:1 ratio.
- WCAG AAA Compliance: Normal text elements require a minimum contrast ratio of 7.0:1. Large text elements require a minimum of 4.5:1. This level ensures maximum legibility for low-vision readers.
How Relative Luminance & Contrast Ratio Are Calculated
The relative luminance of any color is calculated based on its RGB values, representing the perceived brightness of a color relative to absolute white. The formula normalizes sRGB values and adjusts for gamma correction:
If C <= 0.03928: c = C / 12.92
Else: c = ((C + 0.055) / 1.055) ^ 2.4
Where C represents the red, green, or blue channel divided by 255. The overall relative luminance (L) is computed using weighted values that correspond to human spectral sensitivity:
L = 0.2126 * r + 0.7152 * g + 0.0722 * b
Once the relative luminance of the foreground (L1) and background (L2) are calculated, the contrast ratio is determined using the formula:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color (larger luminance value) and L2 is the darker color (smaller luminance value). Adding 0.05 acts as a light ambient bias to prevent division-by-zero errors when dealing with absolute black.
How the Auto-Optimize Tool Works
If your color combination fails compliance checks, you don't have to guess how to correct it. CyberScryb's contrast engine adjusts the lightness channel (L) of the foreground color in HSL space, step-by-step, until it hits the exact target ratio (4.5 or 7.0) relative to your background color. This preserves your color's hue and saturation, giving you the closest accessible match.
Related Developer Resources
- Subnet Calculator — Map server networks cleanly.
- Color Palette Generator — Create beautiful palettes.
- Read CyberScryb CSS & Accessibility Design Guides
How to Check a Color Pair
- Pick your colors. Use the color pickers or paste hex codes for the text (foreground) and the background. The ratio updates live as you type.
- Read the badges. Each card shows pass or fail for normal text AA (4.5:1), normal text AAA (7:1), large text AA (3:1), and large text AAA (4.5:1).
- Preview real text. The sample paragraph and heading below the badges render your exact colors, so you can judge readability with your eyes, not just the numbers.
- Auto-fix failures. Hit "Adjust for AA" or "Adjust for AAA" and the tool walks the foreground color's lightness until it passes, keeping your hue intact.
Who Uses a Contrast Checker
Designers check palette pairs before they ship into a component library, so brand colors never fail an audit later. Frontend developers verify text, buttons, and focus states during builds instead of remediating after launch. QA teams run contrast as part of accessibility test passes across browsers and devices. Anyone facing a compliance requirement, from the European Accessibility Act to a corporate accessibility policy, uses the AA badges as the documented proof a color pair passes.
Frequently Asked Questions
What is a good contrast ratio?
For normal text, aim for at least 4.5:1 to meet WCAG AA, and 7:1 for AAA. Large text and UI components need 3:1 for AA. The scale runs from 1:1 (identical colors) to 21:1 (black on white). Higher is always more readable, especially for low-vision users and in bright light.
What is the difference between WCAG AA and AAA?
AA is the widely required baseline: 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large text. AA is the realistic minimum for general web content; AAA suits text-dense content aimed at people with low vision.
How is the contrast ratio calculated?
The ratio compares the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Luminance comes from the sRGB values with the gamma correction in the WCAG 2.1 spec. This checker uses the same formula as Chrome DevTools, Lighthouse, and axe.
What counts as large text under WCAG?
At least 18pt (24px) regular, or at least 14pt (about 18.66px) bold. Large text gets the easier thresholds: 3:1 for AA and 4.5:1 for AAA, versus 4.5:1 and 7:1 for normal text.
Does passing the contrast ratio guarantee accessibility?
No. Contrast is one criterion out of many. Color used as the only way to convey meaning, keyboard focus visibility, and text placed over images all need their own checks. A passing ratio is necessary, not sufficient.
Do icons and logos need to pass WCAG contrast?
Icons that convey meaning, like status indicators or navigation chevrons, need 3:1 against their background. Purely decorative icons and brand logos are exempt, but anything the user needs to perceive for the page to work still needs contrast.