color contrast checker (& more!)

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are internationally recognized standards for making web content accessible to people with disabilities. These guidelines, developed by the World Wide Web Consortium (W3C), aim to improve web usability for individuals with visual, auditory, cognitive, and motor impairments.

WCAG ensures that content is:

• Perceivable: Users can recognize and use information.
• Operable: Interfaces are functional for a wide range of users.
• Understandable: Content is clear and predictable.
• Robust: Content works well with assistive technologies.

The guidelines are part of accessibility regulations in many countries, making them crucial for compliance and inclusivity.

How WCAG Calculates Contrast

The current WCAG 2.2 standard defines contrast ratios as the luminance difference between text and background colors. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast).

Calculation Formula:

Contrast Ratio =\(\rac{L_{1} + 0.05}{L_{2} + 0.05}\)

Where

• \({L_{1}}\) is the relative luminance of the lighter color.
• \({L_{2}}\) is the relative luminance of the darker color.

Relative Luminance considers the perceived brightness of colors based on human vision. It accounts for the RGB values of the color and adjusts them using a weighting system to approximate perception.

WCAG Levels

WCAG contrast requirements are split into levels to meet varying accessibility needs

• Level AA:Lc ≥ 75 for readability.
  • Normal Text (12–18px): 4.5:1
  • Large Text (18px bold or 24px regular): 3:1
• Level AAA: Enhanced contrast for high accessibility.
  • Normal Text: 7:1
  • Large Text: 4.5:1

Attributions

WCAG is developed and maintained by the W3C Web Accessibility Initiative (WAI). The guidelines are part of an ongoing effort to ensure that digital content is usable by all.

For more information, visit:

• WCAG 2 Overview
• WCAG 2.2 Understanding Docs

Disclaimer

The WCAG compliance compliance calculation of this tool aims to provide accurate and reliable contrast results. However:

• The displayed values and thresholds may differ slightly depending on the color precision and calculation methods used.
• This tool is designed for educational and reference purposes and should not replace a full accessibility audit by a qualified professional.

Further Reading

Explore more about WCAG and color contrast:

• WCAG 3 Introduction
• Color contrast - Accessibility