How to use the checker
- Pick a text color and a background color, or paste their codes.
- Read the contrast ratio and the four results under it.
- Look at the preview. It shows large text, normal text and small print in your colors.
- When a level fails, the checker shows the nearest text color and the nearest background that pass. Press Use it to try one.
Swap turns the colors around, for white text on a colored button. The colors also sit in the page's address, so you can send the link to someone.
What the numbers mean
The contrast ratio compares how light the two colors are, from 1:1 (the same color) to 21:1 (black on white). WCAG 2.2, the rules most accessibility laws point to, sets these minimums:
- AA, normal text: 4.5:1. The level to aim for on websites, emails and posts.
- AA, large text: 3:1. For text of at least 24 px, or 18.66 px in bold.
- AAA, normal text: 7:1. The stricter level, good for long reading.
- AAA, large text: 4.5:1.
Buttons, icons and the borders of form fields need 3:1 against what is next to them. WCAG never rounds up, so 4.49:1 fails AA. The checker rounds down for the same reason.
How the suggestion is found
The checker keeps the hue and strength of your color and moves only its lightness, darker or lighter, until the ratio passes. It does this in OKLCH, where a lightness step looks the same for every color, and picks the smallest change. Your blue stays blue, a little deeper. When no lightness in that hue reaches the level, it says so, and changing the other color is the way out.
On social media
A post is often seen on a small phone in sunlight, at a glance. Aim for at least 4.5:1 for every line of text in a picture, also the big headline. Text on a photo has a background that changes from letter to letter, so put it on a calm part of the photo or on a solid shape.
Use it in Postfjord's design editor
In the design editor, add your brand colors once under Settings, Brand. Shuffle tries other mixes of your own colors and never puts text on a color where it is hard to read. Apply brand keeps the color of text that sits right on a photo, so it stays easy to read. Check a pair here before you save it to your brand.
FAQ
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text meets WCAG 2.2 AA, the level most laws and guidelines ask for. 7:1 meets AAA.
What counts as large text?
Text of at least 18 points, about 24 pixels, or at least 14 points in bold, about 18.66 pixels.
Why does my color look fine but fail?
Your screen, the light in the room and your eyes all differ from your readers'. The ratio is a measure that works for people with weaker sight too, and for a phone in the sun.
Does the checker work for WCAG 3?
No. WCAG 3 is still a draft and its new contrast method, APCA, can change. The checker uses WCAG 2.2, which is the standard today.
Does the checker save my colors?
No. It runs in your browser. The colors are only in the page's address, and nothing is sent to Postfjord.