My Tool Studio
WCAG

Color Contrast Checker

This color contrast checker measures the contrast ratio between a text colour and its background and tells you straight away whether the pair passes WCAG AA or AAA. Enter both colours as hex, rgb(), hsl() or a CSS name, pick them from your screen, or nudge each one with a lightness slider. You get five pass or fail results, an APCA score for reference, and a live preview where you set the font size, weight and sample text. Text opacity is supported, so semi-transparent text is measured as it really appears. If a pair fails, the tool suggests the nearest passing shade of your text colour, or a background that works instead. You can share a link to any pair, pull colours from a screenshot, and check a whole palette in one contrast grid.

Always freeNo sign upRuns in your browser
Lightness46%
Opacity100%
Lightness100%

Contrast ratio

4.54:1

APCA Lc 71.6WCAG 3 draft score, for reference only. Read the value without its sign: about 75 for body text, 60 for other text, 45 for large headlines.

AA · Normal text

needs 4.5:1

Pass

AA · Large text (18pt+)

needs 3:1

Pass

AA · UI components & graphics

needs 3:1

Pass

AAA · Normal text

needs 7:1

Fail

AAA · Large text

needs 4.5:1

Pass

Large heading text

Normal paragraph text. The quick brown fox jumps over the lazy dog, checking readability at typical body size.

Small print: terms, captions, helper text.

Font size16px (12pt)
The five boxing wizards jump quickly.

At this size the text counts as normal: AA needs 4.5:1 (pass), AAA needs 7:1 (fail).

Suggested compliant alternatives (closest to your color)

#535353passes AAA at 7.69:1

Extract colors from an image

Contrast grid for a whole palette

Paste up to 12 colors. Every text and background pair is checked at once.

Text ↓ / Bg →#ffffff#f4f4f5#767676#1f2937#2563eb#dc2626
#ffffff-1.1Fail4.5AA14.7AAA5.2AA4.8AA
#f4f4f51.1Fail-4.1AA1813.4AAA4.7AA4.4AA18
#7676764.5AA4.1AA18-3.2AA181.1Fail1.1Fail
#1f293714.7AAA13.4AAA3.2AA18-2.8Fail3.0AA18
#2563eb5.2AA4.7AA1.1Fail2.8Fail-1.1Fail
#dc26264.8AA4.4AA181.1Fail3.0AA181.1Fail-

AA18 means the pair passes only for large text and UI parts (3:1). Faded cells fail.

How to use

01

Enter the text and background colors

Type or paste a value into Text color and Background color, use the pickers, or press Pick from screen in Chrome or Edge. The Lightness slider under each field darkens or lightens that color, and Opacity sets see-through text.

02

Read the ratio and the five badges

The big number is the WCAG ratio. The badges show AA and AAA for normal text, large text and UI parts. Set Font size and Bold in the preview to see which rule applies to your real text.

03

Fix, share or test more colors

Press Use on a suggested shade, or use the background suggestion instead. Copy results or copy a link to the pair. Upload a screenshot to pull colors in, or paste a palette into the contrast grid.

Why Color Contrast Checker

WCAG contrast thresholds and APCA in brief

WCAG 2 sets fixed minimum ratios that depend on the size of the text and on the level you are aiming for. AA is the level most laws and policies point to. AAA is stricter and is usually applied to specific pages rather than a whole site.

APCA works differently. Instead of one ratio it reports a lightness contrast value called Lc, which is positive for dark text on a light background and negative for light text on a dark one. Read it without the sign. As a rough guide, about 75 suits body text, 60 other readable text and 45 large headlines. Because WCAG 3 is not final, treat the Lc figure as extra information and keep using the WCAG 2 results for compliance.

ElementAA minimumAAA minimumWCAG criterion
Normal text (under 18pt, or under 14pt bold)4.5:17:11.4.3 and 1.4.6
Large text (18pt or more, or 14pt bold or more)3:14.5:11.4.3 and 1.4.6
UI components and meaningful graphics3:1No AAA level1.4.11
Logos, brand names, disabled controlsExemptExempt1.4.3

Common questions

What is a good color contrast ratio for text?
For body text, 4.5:1 is the minimum for WCAG AA and 7:1 meets AAA. Many teams aim a little above 4.5:1 so small rendering differences do not push a color under the line. Black on white is the maximum at 21:1.
What contrast ratio is needed for WCAG AA?
AA needs 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18 point regular or 14 point bold. User interface parts such as input borders, focus rings and icons need 3:1 against what sits next to them under criterion 1.4.11.
How is the WCAG contrast ratio calculated?
Each color is turned into relative luminance, a 0 to 1 measure of how bright it looks. The ratio is (lighter + 0.05) divided by (darker + 0.05). That gives a range from 1:1 for identical colors to 21:1 for black on white.
How does the contrast checker pick a suggested color?
It keeps your background fixed and steps your text color darker or lighter, whichever direction adds contrast, until the ratio clears 4.5:1 or 7:1. The hue stays close to your original. If no shade gets there, it falls back to black or white. When a pair fails AA, it also runs the same search on the background, so you can keep the text color and change the surface instead.
Does WCAG contrast apply to logos and brand names?
No. WCAG 1.4.3 exempts text that is part of a logo or brand name. Text in inactive controls and purely decorative text is also exempt. Everything else, including text in images, is in scope.
How do I check the contrast of text on a photo or image?
Upload a screenshot of the design, then set the text color and test it against both the lightest and the darkest area behind the text. If the weakest spot fails, add an overlay or a solid band behind the text. The checker does not scan the image for text by itself.
What is APCA contrast and should I use it?
APCA is the Accessible Perceptual Contrast Algorithm being developed for WCAG 3. It gives an Lc value that accounts for text polarity, so light on dark and dark on light score differently. It is still a draft, so WCAG 2 ratios remain the standard for audits and legal checks.
Can the contrast checker test colors from a screenshot?
Yes. Press Upload image and the tool shrinks the image and lists its eight most common colors. Under each swatch, Text sets it as the text color and Bg sets it as the background. The same colors also fill the contrast grid below, so you can see every pair at once. The image stays in your browser.
Which color formats does the contrast ratio checker accept?
Hex codes with 3 or 6 digits, rgb() and hsl() values, and CSS color names such as navy all work. The pickers next to each field set a hex value. Transparent colors are not blended with the background, so test the final solid color.
How do I check contrast for semi-transparent text?
Move the Opacity slider under Text color. The checker blends the text color over your background at that opacity, the way a browser draws it, and measures the blended color. The blended hex is shown under the ratio so you can use it in your design.

More WCAG tools

View all

Website Accessibility Scanner

Full-site WCAG 2.1 audit with fix code for every issue

WCAG
URL-first

WCAG Accessibility Checker

Check one page or HTML against 70 WCAG 2.1 rules

WCAG
URL-first

ADA Title II Compliance Checker

WCAG 2.1 AA scan, deadline calculator and Title II readiness checklist

WCAG
URL-first

WCAG Compliance Checklist

Every WCAG 2.0, 2.1 and 2.2 criterion, with saved progress

WCAG