Check color contrast and text readability per WCAG standards

Readability is the luminance difference between the text color and the background color. The greater the difference, the easier it is to read the text. Too low contrast makes content hard to read - especially for people with vision impairments, older adults, or in difficult lighting conditions (e.g., on a phone in direct sunlight).

According to the World Health Organization (WHO), approximately 2.2 billion people worldwide have some form of vision impairment. Red-green color blindness affects up to 8% of men and 0.5% of women of Northern European descent, and color vision also declines with age.

The tool calculates the contrast ratio using the formula specified in the WCAG 2.1 (Web Content Accessibility Guidelines) - international digital accessibility guidelines. The result allows an objective assessment of whether colors are readable enough, regardless of monitor settings or individual color perception.

After entering colors, the tool displays results in three sections:

• Normal text - requires 4.5:1 contrast (AA) or 7:1 (AAA). Applies to text below 18pt (24px) or below 14pt bold.
• Large / bold text - requires 3:1 contrast (AA) or 4.5:1 (AAA). Applies to text of at least 18pt (24px) or 14pt (18.5px) bold, such as large headings.
• Icons - requires 3:1 contrast (AA). Applies to icons and graphical UI elements that convey information.

Green indicator means the requirement is met. Red indicator means contrast is too low and needs improvement.

The tool shows the contrast ratio on a scale from 1:1 (no contrast) to 21:1 (maximum contrast - black on white). The result is compared against thresholds defined in the WCAG standard:

• Normal text - requires at least 4.5:1 for Level AA (minimum standard) or 7:1 for Level AAA (enhanced standard). Applies to text under 18pt (24px) or under 14pt (18.5px) bold.
• Large / bold text - requires at least 3:1 for Level AA or 4.5:1 for Level AAA. Applies to text from 18pt (24px) or from 14pt (18.5px) bold - for example large headings.
• Icons and UI elements - require at least 3:1 for Level AA. Applies to icons, buttons, form fields, and other interface elements that convey information.

Level AA is the level many accessibility policies of public institutions refer to, so it is a sensible starting point. Level AAA provides better readability but is not always practical to achieve for all elements.

If contrast is too low, you don't need to search for the right color by trial and error. The Match feature automatically finds a text color variant that meets the selected contrast threshold.

How matching works:

1. Select the matching target from the list - e.g., AA for normal text or AAA for large text.
2. Click the Match button.
3. The tool will search through lightness variants of the text color and suggest the closest one that meets the requirements.
4. The suggested color can be copied to the clipboard or immediately set as the new text color.

The algorithm preserves the hue and saturation of the original color, changing only the lightness. The suggested color stays consistent with the visual identity while meeting the accessibility standard.

I see a color format error message

Check the color format. A HEX code has 3, 4, 6 or 8 characters, with or without # (e.g. #fff or 1B2632). RGB and HSL values go inside rgb() or hsl(), separated by commas or spaces. CSS color names such as navy or rebeccapurple work as well.

The Match function cannot find a suitable color

When the background and text have similar lightness in the same hue, the algorithm may not find a variant that meets the requirements without changing the hue. In this case, consider changing the background color or choosing an entirely different text color.

The color picker does not match the entered code

The browser color picker only supports the HEX format without transparency. If you enter a color in RGBA or HSLA format with transparency, the picker will show only the color part (without alpha). Contrast calculations still take transparency into account.

Red-green color blindness affects up to 8% of men and 0.5% of women of Northern European descent. People with color blindness may have difficulty distinguishing certain color pairs, even if the luminance contrast is sufficient.

Types of color blindness:

• Deuteranopia - difficulty distinguishing green and red
• Protanopia - difficulty seeing red
• Tritanopia - difficulty seeing blue and yellow (rare)

This tool checks luminance contrast, which is important for all users. However, when designing, it is also worth avoiding problematic color combinations (e.g., red text on a green background) and not relying solely on color to convey information - use shapes, icons, and text as well.

The contrast ratio uses relative luminance - how bright a color appears to the human eye. The WCAG 2.1 formula is:

(L1 + 0.05) / (L2 + 0.05)

L1 is the luminance of the lighter color, L2 of the darker. Luminance is derived by converting sRGB to linear light, then weighting channels: 0.2126 × R + 0.7152 × G + 0.0722 × B.

The result ranges from 1:1 (identical) to 21:1 (black on white). This removes subjectivity - the ratio stays the same regardless of monitor, lighting, or personal vision.

WCAG 2.2 (first published October 5, 2023, current edition December 12, 2024) adds criteria such as dragging movements and focus appearance and removes Success Criterion 4.1.1 Parsing. Success Criteria 1.4.3 and 1.4.6 keep the same contrast thresholds as in WCAG 2.1.

WCAG 3.0 is a working draft. In the draft of September 10, 2026, the editors note that the contrast algorithm is yet to be determined, and APCA (Advanced Perceptual Contrast Algorithm) is not named. W3C says WCAG 3 is not expected to be a completed standard for a few more years and that WCAG 2 will not be deprecated for several years after that.

Until WCAG 3 is finished, this tool calculates contrast with the WCAG 2 formula.