Why Your Canva Text Is Hard to Read (and the 60-Second Fix)

Your Canva design looks fine on your screen and unreadable on someone else's. Here is the 60-second check that catches it before you publish.

You made something in Canva. It looked good on your screen. Then you saw it on your phone in daylight, or someone said they could not quite read the text, and suddenly the thing you were proud of looks like a first draft.

This happens to almost everyone, and it is almost never a taste problem. It is a contrast problem, and it has a specific cause that nobody tells you about.

Your eye is lying to you

When you design something, you already know what the words say. Your brain fills in the letters before your eyes finish reading them. So text that is genuinely too faint still looks fine to you, because you are not really reading it. You are recognizing it.

Someone seeing your design for the first time has none of that. They get only what is actually on screen.

This is why the problem shows up after you publish, and why it feels like other people are being difficult. They are not. They are seeing the real thing.

The pattern behind almost every case

Light text on a light background.

Soft, friendly colors are everywhere in template libraries, and white text often sits on top of them. Soft yellow, blush pink, mint, sky blue. Those combinations look calm and modern in the editor. They are also the exact combinations that disappear in sunlight, on older screens, and for anyone whose eyesight is less than perfect.

Here is what happens when you measure them.

Text on background	Ratio	Verdict
White `#FFFFFF` on soft yellow `#FFC94A`	1.53:1	Fails
White `#FFFFFF` on blush pink `#F4C2C2`	1.57:1	Fails
White `#FFFFFF` on mint `#A8E6CF`	1.41:1	Fails
White `#FFFFFF` on sky blue `#89CFF0`	1.71:1	Fails

For context, readable body text needs a ratio of at least 4.5:1. Every pair above is under 2:1. These are not near misses. The closest is still more than two and a half times short of the threshold, and the worst is more than three times short.

Now the same backgrounds with a dark text color instead:

Text on background	Ratio	Verdict
Charcoal `#2B2B2B` on soft yellow `#FFC94A`	9.24:1	Passes AAA
Deep plum `#4A1F30` on blush pink `#F4C2C2`	8.72:1	Passes AAA
Forest `#1F4436` on mint `#A8E6CF`	7.68:1	Passes AAA
Navy `#0B2545` on sky blue `#89CFF0`	8.97:1	Passes AAA

Workshop this Saturday, 10 AM

#FFFFFF on soft yellow #FFC94A · 1.53:1 · Fails

Workshop this Saturday, 10 AM

Charcoal #2B2B2B on #FFC94A · 9.24:1 · Passes AAA

Workshop this Saturday, 10 AM

#FFFFFF on blush pink #F4C2C2 · 1.57:1 · Fails

Workshop this Saturday, 10 AM

Deep plum #4A1F30 on #F4C2C2 · 8.72:1 · Passes AAA

Workshop this Saturday, 10 AM

#FFFFFF on mint #A8E6CF · 1.41:1 · Fails

Workshop this Saturday, 10 AM

Forest #1F4436 on #A8E6CF · 7.68:1 · Passes AAA

Workshop this Saturday, 10 AM

#FFFFFF on sky blue #89CFF0 · 1.71:1 · Fails

Workshop this Saturday, 10 AM

Navy #0B2545 on #89CFF0 · 8.97:1 · Passes AAA

The background never changed. Only the text color did.

You did not have to give up a single background color. The palette was never the problem. The text color on top of it was.

The 60-second fix

Three steps, and you can do them before you export anything.

One. Find your two colors. Click your text, note the hex. Click the shape or background behind it, note that hex too. Canva shows both in the color panel.

Two. Check the pair. Paste both into the ColorSense WCAG Contrast Checker. You get a number and a verdict in about two seconds, no signup needed.

Three. If it fails, change the text, not the background. Going darker on the text is almost always less disruptive than rebuilding the design around a new background color. In every example above, swapping white for a dark tone took the pair from failing to comfortably passing.

That is the whole method. The reason it works is that you are checking the thing you cannot see, using something that does not rely on your eyes.

What that looks like on a real design

Say you are making an Instagram post announcing a workshop. You picked a soft yellow background because it felt warm and inviting, and the template came with white text on top.

You click the text: #FFFFFF. You click the background: #FFC94A. You paste both into the checker and get 1.53:1. The threshold is 4.5:1, so this is not close.

Your instinct is to change the background, because the text is white and white feels non-negotiable. Resist that. The background is doing the emotional work of the design and the text is doing none of it.

So you change the text to a charcoal, #2B2B2B, and check again. 9.24:1. It now passes the strictest level of the standard, the yellow is untouched, and the post looks more confident than it did before, because the words finally have weight.

Color Basics Workshop

Saturday, 10 AM. Free to join. Save your seat at the link below.

Before: white text on #FFC94A, 1.53:1

Color Basics Workshop

Saturday, 10 AM. Free to join. Save your seat at the link below.

After: charcoal #2B2B2B, 9.24:1

Same design, same background, one changed value. Illustration, not a Canva screenshot.

The whole loop took under a minute. The version you would have published would have been very hard to read on a phone in daylight, which is exactly how most people will see an Instagram post.

The lesson generalizes. When a pair fails, the color carrying the meaning usually stays and the color carrying the words usually moves.

If you want one of these checks a week, the kind that takes a minute and saves a rebuild, that is what ColorSense Weekly is. One email a week, Fridays.

Text over a photo is a different problem

Photos have no single background color, so there is nothing to check against. The color behind your text changes across the image, and it will pass in one corner and fail in another.

Two things that work reliably:

Put a solid or semi-solid shape behind the text and check the text against that shape instead. Now you have a real pair to measure.

Or pick the lightest area of the photo where your text sits, sample it with the ColorSense Color Picker from Image and check your text against that. If it passes on the lightest patch it will pass everywhere darker.

Avoid relying on a soft drop shadow to rescue faint text. It helps a little on some screens and not at all on others, and it cannot be measured.

When your brand color is the thing failing

Sometimes the pair that fails is one you are not allowed to change. A client brand color, or your own.

You still have options, and none of them require abandoning the color.

Use it as a background with dark text on top rather than as text itself. Reserve it for large headings, where the threshold drops to 3:1 rather than 4.5:1. Or derive a darker version for text that keeps the same hue family, so it still reads as the same brand.

That last one is worth a demonstration. White on terracotta #C8644C measures 3.90:1, which is fine for large headings and fails for body copy. White on a deeper teal #0F5257 measures 8.88:1 and passes everything. Same design language, very different outcome, and the only change was depth.

If you want to see how a whole palette behaves rather than one pair at a time, Palette Health scores every combination in a set at once and flags the ones that will cause trouble.

What "readable" actually means

You do not need to memorize the standard, but two numbers are worth knowing.

4.5:1 is the minimum for normal body text. 3:1 is the minimum for large text, meaning roughly 24px and above, or 18.67px and above if it is bold. The full breakdown of levels, exemptions and how the ratio is calculated is in our complete guide to WCAG color contrast.

A useful habit: when you are unsure whether your text counts as large, treat it as normal. The stricter threshold is a safer place to be wrong.

And one caution worth carrying. Contrast measures lightness difference only. It says nothing about whether two colors are distinguishable to someone with color blindness. A pair can pass contrast and still be confusing if you are using color alone to signal meaning. Labels and shapes do work that color cannot do by itself.

The habit that prevents all of this

Check the pair before you build, not after.

Most contrast problems are cheap to fix at the start and expensive at the end, because by then the design is finished and the failing color is load bearing. Sixty seconds at the beginning saves a rebuild later.

If you keep reaching for the same combinations, save the ones that pass so you stop re-deciding. A brand kit is the structured version of that, and the Palette Playbook is thirty palettes where the pairings have already been checked, including a free five-palette edition if you want to look first.

Keep learning with ColorSense Weekly

Get one practical color lesson each week, with useful palettes, design examples, and ideas you can apply to your next project. One email a week, Fridays.

Try it now

Check any color pair against WCAG — free, no signup

Pick a foreground and background, see the exact contrast ratio plus AA/AAA verdicts for normal and large text. One click auto-fixes a failing pair while keeping your hue.

Open WCAG Contrast Checker →