Reverzereverze

Color Contrast Ratio Calculator

Free Calculator

Check the WCAG contrast ratio between your text and background colours to make sure your design is readable and accessible.

100% private

Runs in your browser β€” no numbers leave your device.

Your colours (RGB)

Red channel of your text colour.

Green channel of your text colour.

Blue channel of your text colour.

Red channel of your background colour.

Green channel of your background colour.

Blue channel of your background colour.

Contrast ratio

15.43 : 1

WCAG AA needs 4.5:1 (3:1 for large text); AAA needs 7:1.

How it works

1

colorContrast.how.s1.title

colorContrast.how.s1.desc

2

colorContrast.how.s2.title

colorContrast.how.s2.desc

3

colorContrast.how.s3.title

colorContrast.how.s3.desc

4

colorContrast.how.s4.title

colorContrast.how.s4.desc

Design screenshots people can actually read

Reverze rebuilds App Store screenshots into higher-converting, readable creative.

Why colour contrast matters

Contrast ratio measures how different your text colour is from its background, on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios so that people with low vision or colour deficiencies can read your content. Normal text needs at least 4.5:1 to pass AA, while large text (roughly 18pt, or 14pt bold) only needs 3:1.

The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. This calculator applies the official WCAG relative-luminance formula to your RGB values, so you can check any text-and-background pair before shipping it β€” no eyeballing required.

Frequently asked questions

What is a good contrast ratio?
Aim for at least 4.5:1 for normal body text and 3:1 for large text to meet WCAG AA. For the stricter AAA level, use 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
WCAG defines large text as at least 18pt (about 24px) regular weight, or 14pt (about 18.66px) bold. Large text has a lower contrast requirement because bigger shapes are easier to read.
How is the contrast ratio calculated?
Each colour's relative luminance is computed from its RGB channels, then the ratio is (L_lighter + 0.05) / (L_darker + 0.05). The result ranges from 1:1 to 21:1.
Does contrast ratio depend on which colour is text?
No. The ratio is symmetric β€” swapping text and background gives the same number. WCAG only cares about the difference in luminance between the two colours.