Color Contrast

Check WCAG AA/AAA contrast between two colors.

Color ContrastRuns in your browser
Text color
Background

Aa

Sample text

17.49

contrast ratio

AA · normal text (4.5:1)Pass
AA · large text (3:1)Pass
AAA · normal text (7:1)Pass
AAA · large text (4.5:1)Pass

Runs entirely in your browser. Nothing you enter is uploaded.

How to use

  1. 1Set the text color and background with the color picker or a HEX code.
  2. 2Check the contrast ratio and the sample text preview.
  3. 3Review Pass or Fail for AA and AAA (normal and large text) and adjust colors if needed.

When it helps

  • Checking that text on brand-colored buttons and links is readable.
  • Backing up accessibility decisions with numbers during design review.

FAQ

What ratio does WCAG AA require?

4.5:1 for normal text and 3:1 for large text. AAA raises this to 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

In WCAG, it is at least 18 point (about 24px), or at least 14 point (about 18.66px) when bold.

Which color formats can I enter?

6-digit or 3-digit HEX codes (for example #17150F or #fff). Convert RGB or HSL values to HEX first.

Related tools

Color Converter

Convert a color between HEX, RGB and HSL.

OG Image Generator

Design a 1200×630 social share image and download it.

Social Preview

Preview how a link looks when shared on social.

Automate this inside your content workflow.

tixigen manages SEO, metadata and multilingual publishing in one flow.

See features