WCAG stands for Web Content Accessibility Guidelines, published by the W3C (World Wide Web Consortium). WCAG provides a set of internationally recognized standards for making web content accessible to people with disabilities. The guidelines are organized into four principles: Perceivable, Operable, Understandable, and Robust (POUR). Contrast requirements fall under the Perceivable principle. WCAG 2.0 was published in 2008, WCAG 2.1 in 2018, and WCAG 2.2 in 2023, each adding new success criteria while retaining the previous ones.

What is the difference between WCAG AA and AAA?

AA is the minimum level of conformance required by many accessibility laws and regulations, including the EU Web Accessibility Directive and Section 508 in the US. AAA is the highest level, providing enhanced accessibility. For contrast specifically: AA requires at least 4.5:1 for normal text and 3:1 for large text, while AAA requires at least 7:1 for normal text and 4.5:1 for large text. Most organizations target AA compliance as a baseline, with AAA recommended where feasible.

How is the contrast ratio calculated?

The contrast ratio is calculated using the formula: (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 is computed by converting each sRGB channel value to a linear value (applying a gamma of approximately 2.2), then combining them with weights: 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The resulting ratio ranges from 1:1 (no contrast) to 21:1 (maximum, white on black).

What counts as "large text" in WCAG?

WCAG defines large text as text that is at least 18pt (24px) in size, or at least 14pt (18.7px) bold. All other text is considered "normal" text. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because larger characters are easier to read at lower contrast. Note that 1pt ≈ 1.333px, so 18pt ≈ 24px and 14pt bold ≈ 18.7px.

When should I check contrast ratios?

You should check contrast ratios whenever you are designing or developing any visual interface: choosing brand colors, setting up a design system, creating buttons or links, styling form inputs, implementing dark mode, or auditing an existing site for accessibility. It is especially important to check when: using colored text on colored backgrounds, choosing link colors, designing error/success states, or implementing theme switching. Automated tools like axe-core can catch many issues, but manual checking with a contrast tool ensures accuracy.

My contrast ratio fails. How do I fix it?

If your contrast ratio is too low, you have three options: (1) darken the foreground text, (2) lighten the background, or (3) choose a completely different color pair. This tool suggests the nearest darker and lighter foreground alternatives that pass WCAG AA. You can also try increasing the font size or weight, since large bold text has a lower minimum ratio requirement (3:1 for AA). If you are designing a brand palette, aim for colors that exceed 4.5:1 on your most common backgrounds to ensure flexibility.

What is the difference between relative luminance and contrast ratio?

Relative luminance is a measure of the brightness of a single color, calculated from its RGB values using a gamma-corrected formula. It ranges from 0 (pure black) to 1 (pure white). The contrast ratio, on the other hand, is a comparison between two colors — it divides the relative luminance of the lighter color plus 0.05 by the relative luminance of the darker color plus 0.05. Think of relative luminance as "how bright is this color?" and contrast ratio as "how different are these two colors in brightness?"

Does this tool work with all CSS color formats?

Yes. This tool supports hex colors (#RGB, #RRGGBB), rgb() and rgba() notation, hsl() and hsla() notation, and all named CSS colors (like "red", "blue", "coral"). Simply enter your color in any of these formats, and the tool will parse it automatically. The visual color picker uses the native browser picker for maximum convenience, while the hex input allows precise control.

Free Contrast Checker Online

What is a Contrast Checker?

A contrast checker is a tool that measures the visual contrast ratio between two colors — typically foreground text and a background color — and evaluates whether that combination meets the Web Content Accessibility Guidelines (WCAG) published by the W3C. The contrast ratio is a numerical value ranging from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure white on pure black). Higher ratios mean text is easier to read, which is critical for users with low vision, color blindness, or situational impairments like bright sunlight.

DevToolsHub’s Contrast Checker calculates the exact contrast ratio in real time as you adjust colors, and immediately shows you which WCAG compliance levels you pass or fail. It also suggests accessible alternatives when your current combination doesn’t meet the required threshold. Everything runs 100% client-side — your colors are never sent to a server.

How to Use the Contrast Checker

Select your foreground color — use the native color picker or type a hex value (e.g., #1a73e8) in the foreground input.
Select your background color — similarly, choose a background color with the picker or hex input.
View the contrast ratio — the ratio updates instantly. For example, black text on a white background gives 21:1, while light gray on white may give less than 2:1.
Check WCAG compliance — badges show you at a glance whether your combination passes AA Normal, AA Large, AAA Normal, and AAA Large.
Use the swap button — quickly swap foreground and background colors to test the inverse combination.
Try suggested alternatives — if your combination fails, the tool suggests darker and lighter foreground colors that will pass WCAG AA.
Copy the ratio— use the copy button to grab the contrast ratio string (e.g., “4.56:1”) for documentation or bug reports.
Load example pairs — click any preset example to quickly explore common accessible and inaccessible color combinations.

Understanding WCAG Contrast Ratios

WCAG 2.0 and 2.1 define two levels of conformance for text contrast:

Level AA (Minimum): Normal text (below 18pt, or below 14pt bold) requires a contrast ratio of at least 4.5:1. Large text (18pt / 24px or larger, or 14pt / 18.7px bold or larger) requires at least 3:1.
Level AAA (Enhanced): Normal text requires a contrast ratio of at least 7:1. Large text requires at least 4.5:1.

The contrast ratio formula, defined by WCAG, uses the relative luminance of each color. Relative luminance is calculated by linearizing the sRGB channel values and applying weighted coefficients (0.2126 for red, 0.7152 for green, 0.0722 for blue). The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker. This formula ensures that the ratio is always between 1 and 21.

Note that contrast ratio is symmetric — swapping foreground and background does not change the ratio. However, the visual perception of readability can differ: dark text on a light background is generally easier to read than light text on a dark background at the same numerical ratio.

Tips for Accessible Color Choices

Don’t rely on color alone — always combine color with other visual cues like icons, underlines, or patterns. About 8% of men and 0.5% of women have some form of color vision deficiency.
Check both themes — if your site supports dark mode, verify contrast in both light and dark themes. A combination that passes in light mode may fail in dark mode.
Prefer dark text on light backgrounds — while the mathematical ratio is the same either way, research shows dark-on-light is more readable at equivalent ratios.
Watch out for thin fonts — light-weight fonts (100–300) are harder to read at the same contrast ratio. Consider using at least 400 weight for small text.
Test with real content — use your actual design text, not just placeholder text. The preview in this tool shows both normal and large text so you can evaluate real-world readability.
Aim higher than the minimum — meeting AA is the legal minimum in many jurisdictions, but aiming for AAA ratios where practical provides a better experience for everyone.
Be careful with link colors — links need sufficient contrast both against the background and against surrounding body text, especially for users who cannot perceive color differences.
Non-text elements need 3:1 — icons, form field borders, and other meaningful UI components need at least a 3:1 contrast ratio against adjacent colors under WCAG 2.1 SC 1.4.11.

Contrast Checker

What is a Contrast Checker?

How to Use the Contrast Checker

Understanding WCAG Contrast Ratios

Tips for Accessible Color Choices

Frequently Asked Questions

Contrast Checker

What is a Contrast Checker?

How to Use the Contrast Checker

Understanding WCAG Contrast Ratios

Tips for Accessible Color Choices

Frequently Asked Questions