Color Contrast Checker — Free WCAG AA & AAA Accessibility Tool

Color contrast ratio measures the difference in perceived brightness between two colors — typically a foreground (text) color and a background color. It is calculated using the WCAG relative luminance formula: contrast ratio = (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. Relative luminance converts each RGB channel to a linear value using a gamma correction formula, then combines them as 0.2126×R + 0.7152×G + 0.0722×B. The resulting ratio ranges from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — pure black on pure white).

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (smaller than 18pt or 14pt bold) and at least 3:1 for large text (18pt and above, or 14pt bold and above). For UI components such as form input borders, focus indicators, and icons that convey information, WCAG AA also requires at least 3:1 contrast against adjacent colors. These requirements apply to text and interactive elements — purely decorative images and disabled controls are exempt.

WCAG 2.1 Level AAA requires a contrast ratio of at least 7:1 for normal text and at least 4.5:1 for large text (18pt or 14pt bold). AAA is the highest level of WCAG conformance. It is intended for specialized accessibility use cases — most organizations target AA compliance as the standard for production websites. AAA compliance for all text is often impractical because very high contrast can reduce legibility for people with certain cognitive disabilities, and many brand color palettes cannot meet 7:1 throughout.

Enter your foreground (text) color and background color using the hex input fields or color pickers. The contrast ratio is calculated instantly. The WCAG 2.1 Compliance table shows pass or fail for all five key criteria: AA Normal text (4.5:1), AAA Normal text (7:1), AA Large text (3:1), AAA Large text (4.5:1), and AA UI components (3:1). Use the Preview tabs to see how the colors look for normal text, large text, and UI elements like buttons, inputs, and icons. If the colors fail AA, a suggested foreground color adjustment is shown that meets 4.5:1.

WCAG defines "large text" as text that is at least 18 point (approximately 24px at standard screen resolution) or at least 14 point bold (approximately 19px bold). All other text is "normal text." The rationale is that larger text is inherently easier to read at lower contrast, so it qualifies for a relaxed minimum of 3:1 instead of 4.5:1 for AA. In practice: body copy, labels, captions, navigation items, and most UI text are normal text. Page headings (typically H1–H2) are often large text. Always measure the rendered pixel size, not just the CSS font-size, since browser zoom and user settings can affect the actual size.

The most reliable approach is to darken the foreground (text) color or lighten the background color. This tool shows a suggested foreground hex value that meets 4.5:1 AA when the current combination fails — click "Use" to apply it. Generally: for light backgrounds, use darker text (lower lightness in HSL). For dark backgrounds, use lighter text (higher lightness). Avoid relying on hue changes alone — yellow on white and red on white both have very low contrast regardless of how saturated they are, because luminance is primarily driven by lightness and green content. Use the luminance values shown in this tool to understand which color has more room to adjust.

Disabled interface components and purely decorative content are explicitly exempted from WCAG contrast requirements (Success Criterion 1.4.3 exception). Placeholder text in form inputs is not formally exempted, but WCAG guidance notes that placeholder text is informational rather than required — however, many accessibility audits flag low-contrast placeholders as best-practice failures. The WCAG 2.1 Understanding document recommends that placeholder text also meets 4.5:1 where possible, as it helps users with low vision identify input purpose. Always verify with your organization's accessibility policy.

Relative luminance is a measure of how bright a color appears to the human eye on a linear scale from 0 (absolute black) to 1 (absolute white). It is calculated from the sRGB color values using a linearization formula that corrects for gamma encoding: each channel (R, G, B) is divided by 255, then converted to a linear value using the formula (c + 0.055) / 1.055 raised to the power 2.4 for values above 0.04045, or divided by 12.92 for values at or below 0.04045. The linearized channels are combined as L = 0.2126×R + 0.7152×G + 0.0722×B, reflecting the human eye's greater sensitivity to green light. Pure white (#ffffff) has luminance 1.0. Pure black (#000000) has luminance 0. Medium gray (#808080) has luminance approximately 0.216.