Contrast Checker | ColorBase

A considered contrast.

Foreground / text

Background

CONTRAST RATIO

17.85:1AA normal text passes

Normal AAPass

Normal AAAPass

Large AAPass

Large AAAPass

Live text preview

MADE TO BE READ

Clarity in
every detail.

Good color makes the important things clear. This paragraph uses your exact foreground and background colors.

Sample text link

AA normal text requires 4.5:1; large text requires 3:1. Large text is at least 18 pt, or 14 pt bold. These checks apply to this color pair.

KEEP WHAT MATTERS

Repair contrast. Keep your brand.

Choose which color stays fixed, then review a tested alternative.

This pair already meets your selected normal-text target.

How to use this tool

A practical walkthrough

Pretty palettes fail in production when 14px copy sits on a mid-chroma fill. This checker applies the WCAG 2 contrast math to a real pair, not a vibes-based guess.

Put the text color in foreground and the fill in background — swapping them changes the ratio.
Aim for 4.5:1 for normal text (AA) and 3:1 for large text or UI icons. AAA is 7:1 / 4.5:1.
If you fail, darken the text or lighten the fill first. Changing hue is a last resort because it breaks brand.
Re-test the same pair in dark mode; inverting both colors is not the same as a dedicated dark ramp.

We keep this next to the picker because brand rose `#E11D48` looks strong on marketing pages and then fails as small text on white.

A LITTLE MORE CLARITY

Good questions. Useful answers.

01How is contrast ratio calculated?

Contrast ratio compares relative luminance of foreground and background colors using the WCAG formula: (L1 + 0.05) / (L2 + 0.05).

02What does AA Large mean?

AA Large means the contrast passes WCAG AA for large text (18pt+ or 14pt bold) with a minimum ratio of 3:1, but may fail for normal body text.

Need a reference? Browse the HEX and RGB color code chart. Looking for more? Browse Our Tools.

A practical walkthrough

Pretty palettes fail in production when 14px copy sits on a mid-chroma fill. This checker applies the WCAG 2 contrast math to a real pair, not a vibes-based guess.

Put the text color in foreground and the fill in background — swapping them changes the ratio.

Aim for 4.5:1 for normal text (AA) and 3:1 for large text or UI icons. AAA is 7:1 / 4.5:1.

If you fail, darken the text or lighten the fill first. Changing hue is a last resort because it breaks brand.

Re-test the same pair in dark mode; inverting both colors is not the same as a dedicated dark ramp.

We keep this next to the picker because brand rose `#E11D48` looks strong on marketing pages and then fails as small text on white.

A considered contrast.

Clarity inevery detail.

Repair contrast. Keep your brand.

A practical walkthrough

Keep your ideas moving.

Accessibility Checker

Color Blind Simulator

Typography Color Pairing

Good questions. Useful answers.

A considered contrast.

Clarity inevery detail.

Repair contrast. Keep your brand.

A practical walkthrough

Keep your ideas moving.

Accessibility Checker

Color Blind Simulator

Typography Color Pairing

Good questions. Useful answers.

Clarity in
every detail.

Clarity in
every detail.