Contrast Ratio Grid Accessibility Analyzer

Paste any color palette and instantly generate a full WCAG 2.1 contrast matrix. Check every foreground and background combination for AA, AAA, and Large Text compliance in one view.

Color Palette Input
WCAG Compliance Standard
Contrast Ratio Matrix
AA4.5:1 threshold active
▦

Paste your color palette in the input panel to generate the contrast ratio grid. Each cell shows the calculated ratio with a Pass or Fail badge for the selected WCAG standard.

Key Accessibility Terms Explained
WCAG (Web Content Accessibility Guidelines)
The international standard published by the W3C that defines how to make web content accessible to people with disabilities, including visual, auditory, and cognitive impairments. The current standard is WCAG 2.1.
Contrast Ratio
A numerical measure of how different two colors appear from one another in terms of perceived brightness. Expressed as a ratio such as 4.5:1, where a higher number means greater contrast. The maximum is 21:1 (pure black on pure white).
Relative Luminance
The normalized brightness value of a color in the linear sRGB color space, ranging from 0 (pure black) to 1 (pure white). Luminance accounts for the fact that human eyes are more sensitive to green than red or blue.
AA Standard
The WCAG Level AA requirement: a minimum contrast ratio of 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text and UI components. This is the baseline for ADA and Section 508 legal compliance.
AAA Standard
The WCAG Level AAA enhanced requirement: 7:1 for normal text and 4.5:1 for large text. Not legally required for most sites, but recommended for maximum accessibility, especially in healthcare and government applications.
Large Text Requirement
WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 18.67px) when the font is bold. Large text and non-decorative UI components like buttons require a minimum contrast ratio of 3:1 under WCAG AA.
ADA Compliance
The Americans with Disabilities Act requires that websites serving the public be accessible to people with disabilities. U.S. courts and the Department of Justice have consistently interpreted ADA requirements to align with WCAG 2.1 Level AA standards.
sRGB Color Space
The standard color space used for most web content and computer displays. sRGB values are gamma-encoded, which means they must be linearized (gamma-expanded) before calculating relative luminance for WCAG contrast ratio formulas.

The Complete Guide to WCAG Color Contrast and Accessibility Compliance

Choosing accessible colors is one of the most impactful steps a designer or developer can take to make a website usable for the estimated 253 million people worldwide who live with some form of visual impairment. The contrast ratio between text and its background directly determines whether words are readable for users with low vision, color blindness, or aging eyesight. This guide explains the WCAG 2.1 contrast system, how to use this tool effectively, and the mathematical foundations behind every number in the matrix above.

How to Use the Contrast Ratio Grid Analyzer

Paste your brand or design system color palette into the input field on the left. You can enter colors as HEX codes (with or without the # prefix, both 3-digit and 6-digit formats are accepted), RGB values such as rgb(37, 99, 235), or HSL values such as hsl(221, 83%, 53%). Separate multiple colors with commas or line breaks. The grid regenerates instantly as you type.

Once the matrix appears, each row represents a foreground (text) color and each column represents a background color. The intersecting cell shows the calculated WCAG contrast ratio, a text sample rendered with that exact foreground and background combination, and a Pass or Fail badge based on the standard selected in the toggle. Use the hover effect to track a specific row or column across a large palette.

Reading the Contrast Scale

7:1+ Excellent (AAA) 4.5:1 to 6.99:1 Good (AA) 3:1 to 4.49:1 Marginal (Large Text only) Below 3:1 Fail

A ratio of 7:1 or higher means the color pair passes WCAG AAA and is excellent for all text sizes. Ratios between 4.5:1 and 6.99:1 pass WCAG AA for normal text. Ratios between 3:1 and 4.49:1 are only acceptable for large text (18pt or 14pt bold) and non-text UI components. Anything below 3:1 fails all WCAG standards for meaningful content.

The WCAG 2.1 Contrast Ratio Formula Explained

The WCAG contrast ratio is calculated 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. This formula was derived from psychophysical research on human contrast sensitivity and ensures a consistent measurement independent of the display device.

Relative luminance is not the same as raw brightness. It corrects for the non-linear way sRGB encodes light. Each RGB channel is first normalized from a 0-255 integer to a 0-1 decimal. Values at or below 0.03928 are divided by 12.92 (the linear segment). Values above 0.03928 use the formula ((value + 0.055) / 1.055) raised to the power of 2.4. The three linearized channels are then combined as: 0.2126 times R plus 0.7152 times G plus 0.0722 times B. The green channel carries the most weight because the human eye contains far more green-sensitive cone cells than red or blue.

Why Color Alone Is Not Enough

WCAG contrast ratios measure luminance contrast only, which strips hue information entirely. This is intentional: approximately 8 percent of men and 0.5 percent of women have some form of color vision deficiency (color blindness). A red button on a green background may appear to have strong contrast to a trichromat viewer but is nearly invisible to someone with deuteranopia (the most common form of red-green color blindness). The luminance formula catches these cases because the luminance values of typical reds and greens are often very similar despite appearing dramatically different in hue.

This means passing the WCAG luminance contrast test is necessary but not sufficient for full accessibility. Supplementary measures include not relying on color alone to convey meaning, adding visible text labels or icons, and testing designs in grayscale to verify structure remains clear.

Frequently Asked Questions

For normal-sized body text, WCAG 2.1 requires a minimum contrast ratio of 4.5:1 to meet AA compliance and 7:1 for AAA (enhanced) compliance. For large text (18pt or 14pt bold and above) and non-decorative UI components such as buttons and form inputs, the minimum drops to 3:1 for AA compliance. A ratio of 4.5:1 is the baseline for most projects targeting legal ADA compliance. Ratios above 7:1 are considered excellent and ensure readability in poor lighting, on low-quality screens, and for users with low vision.
WCAG AA (Level AA) is the standard most organizations target for legal ADA and Section 508 compliance. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and UI components. WCAG AAA (Level AAA) is the enhanced, stricter standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required by most accessibility laws, but is recommended for applications serving older users, users with low vision, or high-stakes contexts like government portals and healthcare platforms. Many design systems adopt AAA as an aspirational target for their primary text combinations.
Larger text is physically easier to read even at lower contrast because the letterforms occupy more pixels and the eye can resolve the edges more easily. Similarly, UI components like buttons and form borders convey meaning through shape, position, and interaction cues in addition to color, so a slightly lower luminance contrast threshold is acceptable. WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 18.67px) when the font weight is bold. Anything smaller than these thresholds uses the stricter 4.5:1 normal-text requirement.
The WCAG 2.1 contrast ratio formula is (L1 + 0.05) divided by (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 is calculated by first converting each sRGB channel (R, G, B) from the 0-255 range to a 0-1 decimal. Each channel is then linearized: if the value is 0.03928 or less, divide by 12.92; otherwise compute ((value + 0.055) / 1.055) to the power of 2.4. The three linearized channels are combined using perceptual weights: 0.2126 times red, 0.7152 times green, and 0.0722 times blue. The contrast ratio ranges from 1:1 (identical colors, no contrast) up to 21:1 (pure black against pure white, the maximum possible contrast).
Human perception of contrast is highly influenced by hue, context, surrounding colors, and individual screen brightness, all of which the WCAG formula deliberately ignores. Two colors with different hues (for example, a vivid red on a medium green) can appear to have strong contrast based on their color difference, but if their luminance (brightness) values are similar, the ratio will be low. This is intentional: the WCAG formula measures only luminance contrast because that is what fails for people with color vision deficiency. Approximately 8 percent of men have some form of red-green color blindness, and to them a red-on-green combination can be nearly invisible regardless of how vivid it appears to trichromat eyes. Testing in grayscale or running a color blindness simulation alongside the contrast ratio check provides the most complete picture.