WCAG Color Compliance Checker
Evaluate whether a foreground/background color combination meets WCAG accessibility requirements.
Input
Result
WCAG Color Compliance Checker
The WCAG Color Compliance Checker is an accessibility design utility designed to calculate the contrast ratio between foreground and background colors. Contrast compliance is a critical requirement of modern web accessibility, ensuring that text is readable for users with visual impairments. This tool automates the relative luminance calculations, preventing design mismatches. Designers and developers input foreground and background hex codes, and the color engine outputs the contrast ratio and WCAG compliance ratings instantly.
WCAG 2.1 Contrast Standards
The Web Content Accessibility Guidelines (WCAG) define specific contrast thresholds to ensure readability. Contrast is calculated as a ratio between the relative luminance of the lighter color and the darker color. The ratio ranges from 1:1 (no contrast, e.g. white on white) to 21:1 (maximum contrast, black on white).
According to accessibility standards, there are 4 distinct compliance targets that govern color contrast. First, WCAG AA Normal Text requires a minimum contrast ratio of 4.5:1. Second, WCAG AA Large Text (defined as 18pt or 14pt bold) requires a minimum ratio of 3.0:1. Third, WCAG AAA Normal Text requires a minimum ratio of 7.0:1 to ensure high readability. Fourth, WCAG AAA Large Text requires a minimum ratio of 4.5:1. Color engines calculate relative luminance to verify these targets.
The History of Web Accessibility
In the early days of the web, designers used color combinations that caused severe readability issues, particularly for users with color blindness. In 1999, the World Wide Web Consortium (W3C) published the Web Content Accessibility Guidelines 1.0, introducing the first formal guidelines for web accessibility. In 2008, WCAG 2.0 established the modern mathematical formula for relative luminance based on the sRGB color space, creating a standardized metric that allows developers to audit layouts and ensure content accessibility for all users.
How the Compliance Checker Works
To check contrast compliance, enter the foreground and background hex codes, and execute the checker. The color engine processes the values through a 3-step sequence.
- Luminance Calculation: The engine parses the hex codes, extracts the Red, Green, and Blue channels, and linearizes the values to calculate the relative luminance ($L$) of each color.
- Ratio Determination:
- The engine divides the lighter luminance plus 0.05 by the darker luminance plus 0.05.
- This resolves the contrast ratio (e.g. 4.5:1).
- Compliance Checks: The engine compares the calculated ratio against the WCAG AA and AAA thresholds, assigning PASS or FAIL status for normal and large text.
For example, testing black text (#000000) on a white background (#ffffff) yields a 21.00:1 ratio, passing all WCAG levels. The tool displays this result instantly.
WCAG Contrast Reference Table
The table below displays contrast ratios and compliance ratings for sample color pairs.
| Foreground Color | Background Color | Contrast Ratio | WCAG AA Normal Text Status | WCAG AAA Normal Text Status | Design Application Recommendation |
|---|---|---|---|---|---|
| #000000 (Black) | #ffffff (White) | 21.00:1 | PASS | PASS | Optimal contrast for body text and headers |
| #7f8c8d (Gray) | #ffffff (White) | 3.43:1 | FAIL | FAIL | Inadequate for body text; only suitable for large labels |
| #3498db (Blue) | #ffffff (White) | 3.27:1 | FAIL | FAIL | Too light for body text; requires darkening for links |
| #2c3e50 (Dark Blue) | #ffffff (White) | 10.37:1 | PASS | PASS | Excellent contrast for headings and buttons |
Frequently Asked Questions
What is relative luminance?
Relative luminance represents the perceived brightness of a color. It is calculated by weighting the Red, Green, and Blue channels to match human color perception, where green appears brighter than blue.
What counts as large text in WCAG guidelines?
Large text is defined as text larger than 18pt (24px) or bold text larger than 14pt (18.6px). Large text requires lower contrast ratios to remain readable.
Can this checker analyze gradients?
This checker processes solid color hex codes. For gradients, it is recommended to test the contrast against the lightest or darkest point of the gradient background.
Audit Your Web Designs Instantly
Manual color checking using design templates is slow and prone to color calibration errors. The WCAG Color Compliance Checker delivers reliable, instant calculations. Use this tool to verify style sheets, audit brand colors, and secure accessibility compliance easily.