What contrast ratio do I need to pass WCAG AA?

Normal body text needs at least 4.5:1 against its background. Large text (24px regular or 18.66px bold and up) and non-text UI elements like icons and input borders need at least 3:1.

Does white text on my brand color have to pass too?

Yes. Any text a user needs to read has to meet the threshold, including white or light text on a colored background. If the brand color is too light, white text on it will often land below 4.5:1.

Can I just make the text bigger to pass?

Bigger or bolder text drops the requirement from 4.5:1 to 3:1, so a borderline pair can qualify. Use it only when the size increase fits the design. It is a last resort, not a way to keep genuinely low contrast.

Do I have to change my brand color to pass contrast?

Usually not. Keep the brand color for backgrounds, large headings, and accents, and use near-black or near-white for body text. You rarely need to repaint the brand itself.

5 Color Contrast Fixes That Actually Work

A ranked playbook for fixing failing color contrast pairs while keeping your brand and layout intact.

You ran a checker, a pair failed, and now you have a number staring at you. The hard part is not finding the failure. It is fixing it without flattening the design you already shipped. Most advice stops at “increase contrast,” which is true and useless. Here is a ranked set of fixes, from least disruptive to most, so you can reach for the smallest change that clears the bar.

TL;DR: Darken or lighten the text first. If the color itself is the brand, move the brand to the background and use near-black or near-white for the words. Overlays rescue text on photos. Bigger text is a fallback, not a fix.

What you are aiming for

WCAG AA has two numbers worth memorizing. Normal text needs a contrast ratio of at least 4.5:1 against its background. Large text needs 3:1, where large means 24px and up at regular weight, or 18.66px and up at bold. The same 3:1 floor covers non-text UI: icons, focus rings, input borders, anything a user has to perceive to operate the page.

Contrast ratio runs from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). The ratio depends on the relative luminance of both colors, not on hue, so two colors that look different can still fail if they sit at similar brightness. That is why a saturated blue link on a saturated red background can be unreadable even though the hues clash hard.

Pick the fix that matches what is fixed in your design and what is free to move.

Fix 1: Push the text darker or lighter

This is the first thing to try almost every time. The text color is rarely sacred, so nudge it until it passes. On a light background, darken the text. On a dark background, lighten it. You keep the layout, the spacing, and usually the hue.

A common failure is mid-gray body text that looked elegant in the mockup.

Element	Before	After	Background	Ratio before	Ratio after
Body text	`#999999`	`#595959`	`#FFFFFF`	2.85:1	7.0:1
Link on dark	`#6699CC`	`#9FC2E8`	`#1A1A1A`	3.9:1	8.4:1

The hue stays recognizably the same. You only moved its lightness. This is the least disruptive fix and clears the most failures, so start here before touching anything structural.

Fix 2: Keep the brand color, but not on the text

Sometimes the failing color is the brand, and you do not want to repaint your identity to satisfy a checker. You do not have to. Move the brand color to where it does not carry reading load.

Say your brand is a warm amber, #F0A500. Amber text on white is a classic failure because amber is light. The fix is to let amber own backgrounds, large headings, buttons, and accents, while body copy switches to near-black.

Use	Color	Background	Ratio	Verdict
Amber body text	`#F0A500`	`#FFFFFF`	1.9:1	Fails
Near-black body text	`#1A1A1A`	`#FFFFFF`	17.4:1	Passes
Large heading in amber	`#F0A500`	`#1A1A1A`	9.1:1	Passes large and normal
Near-white text on amber button	`#FFFFFF`	`#F0A500`	1.9:1	Fails
Dark text on amber button	`#1A1A1A`	`#F0A500`	9.1:1	Passes

The brand reads loud and clear as a field of color. The words sit in near-black or near-white. Notice that white on amber fails just as hard as amber on white, because the luminance gap is the same either way. On a light brand color, dark text is the move.

Fix 3: Put a layer between text and a busy background

Text over a photo or a gradient has no single background color, so a checker cannot even give you one honest number. The darkest patch of the image might pass while the bright sky behind the headline fails. The fix is to control the background locally with an overlay.

Two approaches work. A solid scrim is a semi-transparent black or white panel sitting behind the text block. A gradient scrim fades from opaque at the text to transparent away from it, which hides the panel edge.

Suppose white headline text sits over a photo whose lightest region is roughly #C8D2DC.

Setup	Effective background	Ratio	Verdict
White text, no overlay, over light sky	`#C8D2DC`	1.4:1	Fails badly
White text over 60% black scrim on that sky	about `#4F5559`	6.8:1	Passes

Pick the overlay opacity by testing against the worst patch the text crosses, not the average. If the image shifts (different photos in a carousel), set the overlay strong enough for the brightest one. A blur behind the text helps perception but does not change the ratio, so do not lean on it to pass.

Fix 4: Size up to reach the 3:1 threshold (carefully)

Large text only needs 3:1, so a pair that misses 4.5:1 can still qualify if you make the text large. This genuinely helps a near-miss heading.

Element	Color	Background	Ratio	At 16px regular	At 24px or 19px bold
Subheading	`#767676`	`#FFFFFF`	4.54:1	Passes	Passes
Section label	`#949494`	`#FFFFFF`	3.0:1	Fails	Passes

Use this when the design already wants a big heading and you are a hair short. Do not use it as permission to keep weak body contrast by bumping everything to 24px, because that breaks your type scale and still leaves small text failing. Treat size as a tool for headings, not a blanket pass.

Fix 5: Move the background when the text is locked

Occasionally the text color is the fixed brand value, written into a logo lockup or a strict guideline, and you genuinely cannot touch it. Then change the background instead.

If the brand requires a specific blue for the wordmark, #2E5C8A, and it sits on a mid-gray bar that fails, darken or lighten the bar until the pair clears.

Element	Text	Background before	Background after	Ratio before	Ratio after
Brand wordmark on bar	`#2E5C8A`	`#7A7A7A`	`#F2F2F2`	1.6:1	5.1:1

Lightening the bar pushed the pair from a clear fail to a clear pass without touching the protected blue. When the foreground is immovable, the background is your lever.

Working order

Run down the list in order and stop at the first fix that fits. Adjust the text. If the color is the brand, move the brand off the text and use near-black or near-white for reading. Add an overlay when the background is an image or gradient. Size up only when the design already wants large type. Adjust the background last, when the text color is locked.

Check every fix with real numbers, not by eye, since a pair can look fine on your bright monitor and fail on a dimmer screen in daylight. Free, in-browser contrast tools that compute these ratios and suggest passing pairs are coming soon to color.hivly.net. Until then, any reputable contrast checker will give you the ratio you need to confirm the fix landed.