Colour Contrast Cards

Generate cards where each cards background is a palette colour. Within each card view which colours within your palette have sufficient contrast for text. Default colourset is University of Southampton brand, but you can upload your own.

Enter colours in various formats: hex codes with or without hash symbols, names can be before or after hex codes, use new lines or commas to separate colours

Contrast Analysis Results

Display and filter options
When checked, displays numerical contrast ratios alongside AA and AAA badges
When checked, displays hex colour codes alongside colour names
When checked, shows each pair's APCA level. Tick Show contrast ratios too for the Lc value.
Also switches on Show APCA rating. Hides the Graphics and Large Text section.
Colour vision simulation
How to read these results

Colours are shown as they are, with no simulation applied.

The contrast ratios and APCA values on the cards are always computed from the original colours. They do not change under simulation.

Colour vision simulation is unavailable because your system is using forced colours. Your own colour choices have already replaced this palette, so simulating the palette would show you nothing about it.

APCA, the Accessible Perceptual Contrast Algorithm, is the candidate contrast method for WCAG 3. It models perceived readability more closely than the WCAG 2 ratio, particularly for light text on dark backgrounds. Filtering to pairs that pass both standards removes the Graphics and Large Text section, because a pair that does not reach 4.5 to 1 cannot satisfy WCAG AA. APCA is in beta and subject to change.

Unusable Background Colours

These colours cannot be used as backgrounds because they don't provide sufficient contrast with any text colour for WCAG AA compliance.