jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

CSS Color Contrast Checker

Enter a foreground and background color, and see the contrast ratio with WCAG AA and AAA pass/fail results for normal and large text. Runs entirely in your browser.

Loading tool...

What is CSS Color Contrast Checker?

WCAG contrast ratio measures the luminance difference between two colors. A ratio of 4.5:1 meets the AA standard for normal text, and 7:1 meets AAA. These thresholds help ensure that people with low vision, color vision deficiency, or who are reading on a screen in difficult lighting can still read the content. This tool calculates the precise ratio from the hex values you enter and shows whether the combination passes the level you need, helping designers and developers check color combinations before publishing.

Quick answer

Check whether two color combinations meet WCAG contrast standards before publishing. The tool calculates the precise ratio and tells you whether normal text, large text, and UI components pass AA or AAA levels.

Limitations

  • The color picker returns hex values only. It does not support RGB, HSL, or named color inputs directly.
  • The tool checks solid color pairs. It does not evaluate contrast on gradient text, box-shadow text, or background images where luminance varies across the element.
  • Contrast ratios are calculated from the colors you enter. If either color is transparent the result will not reflect the actual visible contrast against the underlying page background.

How to use this tool

  1. Enter the foreground color using a hex code, RGB value, or color picker.
  2. Enter the background color the same way.
  3. Read the contrast ratio result and the WCAG AA and AAA pass/fail indicators for normal text and large text.
  4. Adjust either color until the ratio meets your target accessibility level.

What you can use it for

  • Check whether body text on a light background meets WCAG AA readability standards.
  • Validate brand color combinations across buttons, badges, and UI components.
  • Prepare accessible design specs before handing off to development.

Use cases

Practical examples

Example

Button text on brand color

A designer picks a brand blue background for a primary button and needs white text. The tool confirms the contrast ratio meets AA for normal text or suggests a darker shade if it does not.

Example

Body text on a custom background

A landing page uses a light gray section background. The tool checks whether the default dark gray body text stays readable at the AA level.

Common mistakes

  • Relying on visual judgment instead of a measured ratio, which can miss contrast problems.
  • Testing only on a bright screen in a well-lit room where low-contrast text may look acceptable.
  • Forgetting that large text passes WCAG AA at a lower ratio (3:1) than normal text (4.5:1).

Verification

  1. Test the final color pair in a browser by zooming to confirm text is readable at small sizes.
  2. Compare the tool result against the WCAG contrast checker in Chrome DevTools Accessibility panel for a second opinion.

FAQ

Questions about CSS Color Contrast Checker

What is a good contrast ratio?

For normal text, aim for at least 4.5:1 (WCAG AA) or 7:1 (WCAG AAA). For large text above 18px or 14px bold, 3:1 meets AA.

Does WCAG apply to decorative text?

WCAG applies to information-bearing text. Purely decorative text that carries no meaning and is not part of a user interface element does not need to meet contrast thresholds.

Does WCAG AA apply to all text on a page?

WCAG AA applies to standard body text. Large text above 18px or 14px bold can pass AA at a lower ratio of 3:1. Logos, decorative text, and inactive UI elements are exempt from contrast requirements.

What color formats does this tool accept?

The tool accepts hex color codes and provides a color picker. Enter colors as six-digit hex values such as #333333 or #ffffff. The color picker returns hex values only.

Related tools

More css tools

Also try

Also try