Skip to main content

What is Contrast Checker?

Check color contrast ratios to ensure readability and WCAG compliance.

The Contrast Checker in A11yInspect helps evaluate whether the background and foreground color combinations meet WCAG contrast requirements. It ensures that text and non-text elements are easily readable for all users, including those with visual impairments.

WCAG Text and Background Contrast Requirements​

  • For standard text (below 18pt regular or 14pt bold), the contrast ratio must be at least 4.5:1.
  • For large text (18pt or larger, or 14pt bold), the contrast ratio must be at least 3:1.
  • For non-text content such as icons, buttons, and graphics, a minimum contrast ratio of 3:1 with the background is required.

info

Please refer to SC 1.4.3: Contrast (Minimum) and SC 1.4.6: Contrast (Enhanced) in the WCAG guidelines for additional information.

How to Use the A11yInspect Contrast Checker​

  1. Open a webpage in your browser.
  2. Open Inspect (DevTools).
  3. In the Elements panel, select the A11yInspect tab.
  4. Choose the Contrast Checker tab.
  5. Enter the Foreground and Background colors using the color picker, or manually enter values in HEX, HEXa, RGB, or RGBa format.
  6. Select Preview to view the results.

The results display the color contrast ratio and indicate whether the color combination passes or fails for both standard and large text, according to WCAG conformance levels AA and AAA.

note

Maintaining adequate color contrast is essential to ensure that text and interactive elements remain legible for users with low vision or color deficiencies.