Color Contrast Checker — WCAG AA & AAA Compliance

Contrast ratio is calculated from the relative luminance of two colors. Relative luminance is a measure of how much light a color emits on a linear scale from 0 (absolute black) to 1 (absolute white). It applies a gamma correction formula to account for human perception of brightness. The contrast ratio formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker one. The 0.05 offset prevents division by zero and represents ambient light contribution. The result ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). All contrast checking tools follow this formula as specified in WCAG 2.1.

WCAG 2.1 defines two compliance levels for color contrast. Level AA is the minimum standard required by most accessibility laws including the Americans with Disabilities Act (ADA) and EN 301 549 in Europe. AA requires a contrast ratio of at least 4.5:1 for normal text (below 18pt regular or 14pt bold) and at least 3:1 for large text (18pt or larger regular, 14pt or larger bold). Level AAA is the enhanced standard for maximum accessibility: it requires 7:1 for normal text and 4.5:1 for large text. AAA compliance is recommended for critical text such as form labels, error messages, and legal disclosures, but is not required for all content since it can be difficult to achieve while maintaining visual design quality.

WCAG 2.1 added criterion 1.4.11, which extends contrast requirements beyond text. UI components — including button borders, input field borders, focus indicators, checkboxes, and radio buttons — must have a minimum 3:1 contrast ratio against their adjacent colors. Graphical objects that convey information (such as chart lines, icons, and infographic shapes) must also meet 3:1. This rule does not apply to decorative elements that convey no information, disabled controls, or elements where the visual presentation is determined solely by the browser. Checking non-text contrast is often overlooked compared to text contrast, but it significantly affects usability for people with low vision.

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. The most common types are deuteranopia (difficulty distinguishing red and green) and protanopia (reduced sensitivity to red). WCAG 1.4.1 (Use of Color) states that color must not be the only visual means of conveying information — for example, a form that shows errors only by turning fields red will be inaccessible to red-green color-blind users. Always supplement color cues with text labels, icons, or patterns. Contrast ratio checking only ensures that the luminance difference is sufficient; it does not guarantee that users with color blindness can distinguish the two colors. Use a color blindness simulator alongside a contrast checker for thorough accessibility testing.

Meeting contrast requirements while maintaining visual appeal is achievable with some systematic approaches. Start with your brand primary color and adjust its lightness in HSL until it meets the required ratio against your background — this preserves hue and saturation while achieving compliance. For link colors on a white background, a sufficiently dark blue (like #0047AB) passes AA easily. For text on dark backgrounds, off-white (like #F0F0F0) is often easier on the eye than pure white while still meeting AAA. For button labels, test both the resting and hover or focus states separately, since color changes on interaction must also pass contrast requirements. Light gray text on white backgrounds — a common aesthetic trend — frequently fails WCAG AA and should be avoided for meaningful content.