Can shoppers actually read my popup?
Last updated
Pick them or paste the hex codes from your popup or theme settings.
Optional. The label is graded against the fill, and the fill against the popup.
Enter a text colour and the background behind it. The ratio, the WCAG verdict and a fix colour appear as soon as both are valid hex codes.
- Text colourNeeded
- Popup backgroundNeeded
- Button label and fillOptional
Graded against WCAG 2.1: 4.5:1 for normal text and 3:1 for large text at AA, 7:1 and 4.5:1 at AAA, and 3:1 for a button fill against its background. Fix colours keep your hue and move only its lightness; when no shade of it clears, black or white is suggested instead.
Want to see your brand colour on a working popup? Build one in the popup maker, or check how it behaves on mobile. The colours you enter stay on the page: they are not sent to us or stored unless you share or email the result yourself. Only an anonymous event that the checker was used is recorded.
Ratios, floors and the fix colour
Colour contrast is how far apart two colours are in brightness, written as a ratio from 1:1 to 21:1, so grey text at 2.84:1 on a white popup fails the WCAG AA floor of 4.5:1 while near-black text passes it at 17.4:1.
Contrast floors: WCAG 2.1 success criteria 1.4.3 (AA), 1.4.6 (AAA) and 1.4.11 (non-text contrast). No store is measured here; every ratio comes from the two colours you enter. To see a brand colour on a working popup, use the popup preview.
Two colours in, one ratio out, then that ratio read against the floors the WCAG accessibility guidelines set for normal and large text.
- Contrast ratio
- How far apart two colours are in brightness. 1:1 is the same colour twice and 21:1 is black on white. Hue does not count: a red and a green of the same brightness score close to 1:1 and are unreadable together.
- AA
- The WCAG level most accessibility guidance points to. Normal text needs 4.5:1 against its background; large text needs 3:1. Popup body copy, small print, form labels and button labels are all normal text.
- AAA
- The stricter WCAG level: 7:1 for normal text and 4.5:1 for large text. It is a target for long or small copy rather than a common requirement, and plenty of brand palettes cannot reach it without changing colour.
- Large text
- Text of 24px or more, or about 19px and bold. A popup headline usually qualifies; the offer terms under it almost never do. A pair that only passes as large text belongs on the headline and nowhere else.
- Fix colour
- The nearest colour on the same hue that clears the floor, found by darkening or lightening your own colour rather than swapping it for another one. Your brand stays recognisable; it just gets readable.
Nudgesmart is available on the Shopify App Store. Browse the template library or see what it costs.
Eight popup colour pairs, graded
Illustrative colour pairs, not any real store. Every ratio, verdict and fix colour is produced by the same function the checker above runs.
| Scenario | Text | Background | Ratio | Verdict | Fix |
|---|---|---|---|---|---|
| Light grey small print on a white popup | #999999 | #ffffff | 2.84:1 | Fails AA | text #747474 (4.67:1)background #2e2e2e (4.76:1) |
| White label on a coral button | #ffffff | #f57d52 | 2.64:1 | Fails AA | text #333333 (4.77:1)background #b55c3d (4.60:1) |
| Near-black copy on white | #1a1a1a | #ffffff | 17.40:1 | Passes AAA | none needed |
| Cream headline on a sage background | #f5f0e6 | #6f8a63 | 3.36:1 | Large text only | text #181817 (4.64:1)background #5d7453 (4.52:1) |
| Gold text on a black luxury popup | #c9a24a | #111111 | 7.86:1 | Passes AAA | none needed |
| White on a mid green offer banner | #ffffff | #3a9d4f | 3.43:1 | Large text only | text #242424 (4.52:1)background #318442 (4.65:1) |
| Pastel pink headline on white | #f4a6c0 | #ffffff | 1.89:1 | Fails AA | text #976777 (4.64:1)background #474747 (4.89:1) |
| Mid grey body copy on white | #5f6368 | #ffffff | 6.04:1 | Passes AA | text #55595e (7.05:1) |
Where a passing ratio still reads badly
Text over a photo has no single background
The checker grades one flat colour against another. Text laid over an image passes or fails pixel by pixel, and the lightest patch behind a letter decides whether it can be read. Put a solid panel or a strong scrim behind text on photos, and check against that.
Thin fonts read worse than their ratio
A hairline or light-weight typeface at 4.5:1 is harder to read than a regular weight at the same ratio, because there is less ink on the screen. The ratio is a floor for ordinary weights, not a guarantee for a delicate display font.
Opacity changes the colour you are checking
A white label at 80 percent opacity on a coloured button is not white. Check the colour that actually reaches the screen, which is the blend, not the hex in the style sheet.
Passing contrast is one part of accessibility
A readable popup can still trap keyboard users, hide its close button from screen readers or cover the page on mobile. Contrast is the part you can check from two hex codes; the rest needs testing on the real popup.
Popup colour contrast questions
What contrast ratio does popup text need?
At least 4.5:1 for normal text, which covers body copy, offer terms, form labels and button labels, to meet WCAG AA. Headlines of 24px or more, or about 19px in bold, need 3:1. The stricter AAA level asks for 7:1 and 4.5:1.
Why does white text on my brand colour fail?
Because many brand colours are mid-brightness: coral, orange, sky blue and mid green sit close enough to white that white text lands between 2:1 and 3.5:1. The fix is usually a darker shade of the same brand colour behind the text, which the checker suggests.
Does the suggested colour change my brand?
It keeps the same hue and only moves it darker or lighter until it clears the floor, so it reads as the same colour family. It tries darker and lighter shades of both your text and your background. If no shade of either hue clears the floor, it suggests plain black or white, and if even that cannot, it tells you to change the background rather than showing a colour that still fails.
Does the button need contrast against the popup too?
The label needs 4.5:1 against the button. The button fill itself should also stand apart from the popup background, at 3:1 or more, so it reads as something to tap. The checker grades both when you enter the button colours.
Is WCAG contrast a legal requirement for my store?
It depends on where you trade, and this page is not legal advice. WCAG AA is the level most accessibility guidance and standards refer to, which is why the checker grades against it. Meeting it is also simply the point at which most shoppers can read the popup without effort.
A legible popup still needs a trigger and an audience.
Nudgesmart starts from ready-made templates you recolour to your brand, then targets the popup on real on-site behaviour.
