Contrast beyond black and white

Black text on a white card is easy: it passes any contrast check. Grids are harder. Their text sits on photos, their filter buttons come in two states, and the keyboard’s focus has to show on every one of them. Each of these is a contrast question, and each has a number you can measure.

This guide measures them on two live grids: the same six bright photos, snow, sand and white walls, the hardest ground for white text.

Two numbers to remember

The Web Content Accessibility Guidelines (WCAG) ask for:

• 4.5 : 1 between text and its background;
• 3 : 1 for large text (24 px, or about 19 px in bold) and for the parts of a control that people need to see: a button’s edge, a focus ring.

A contrast ratio runs from 1 : 1 (the same colour) to 21 : 1 (black on white). Every number in this guide was measured on the grids below; for text over a photo, against the brightest pixel behind the text, in a wide and in a phone-sized window.

Text over photos

White text on a photo has no single background: it changes with every picture and with every part of it. Without help, the white texts on these six photos measure as little as 1.1 : 1 at the brightest spot behind them (white sand), and under 2.6 : 1 on five of the six. They are readable only where a photo happens to be dark.

The help is a cover: a colour between the photo and the texts. The same six photos, under two covers:

Both pass. The first is the simple choice: one even shade, and the texts can go anywhere on the card. The second keeps the photos bright and puts the dark only where the words are; it suits cards whose texts sit in one place, as here at the foot.

Where you set it

A cover belongs to the item skin. Open the skin from the grid editor’s Items page (Edit skin), choose Card and open Look › Cover:

• Cover area: The whole media, or Only behind its layers (behind the cover’s top, centre and bottom zones that hold layers).
• Colour: a colour or a gradient. Give it some transparency, so the photo still shows; the grids above use a near-black at 60 % and 72 %.
• Under More, Blend mode: how the cover mixes with the media. Normal is the one you can predict; any other mode mixes differently with every photo, so measure each.

A cover that shows only on hover leaves the texts on the bare photo the rest of the time, and on a phone there is no hover. If your texts show at rest, show the cover at rest too: Card › Hover › Always show, with Desktop and Mobile ticked.

The colour themes in Card › Look › Colours & fonts also set a cover: Dark cover, white text and Light cover, dark text colour the cover and the texts on it in one click (A colour system for your grid). Measure the result on your brightest photo.

Measure the worst photo, not the average

A cover that works on a dark photo can fail on the next one. To check a grid:

1. Find the brightest photo behind white text (or the darkest behind dark text), and on it the brightest spot where the text sits.
2. Pick that spot’s colour with a contrast checker’s eyedropper and measure the text colour against it.
3. Below 4.5 : 1, make the cover stronger or use Only behind its layers, and measure again.

A grid of posts gets new photos with every new post, and a snowy one may come next winter. Choose a cover with some room above 4.5 : 1 rather than one that just passes today.

Filter buttons and other controls

The filter buttons, page numbers and arrows have their own colours, set by the grid’s Navigation style (grid editor › Navigation › Style and memory). Check them on your page’s background, in both states. The filter buttons above (their colours set in this grid’s own navigation-skin CSS) measure:

Part	Colours	Contrast
The name on a button	#2b2926 on white	14.5 : 1
The count beside it	#625d57 on white	6.5 : 1
A pressed button	white on #18181b	17.7 : 1
A button’s edge	#8a847d against white	3.7 : 1

The edge counts too: it is what shows a button as a button. A light grey edge (#d9d4ce, a common choice) measures 1.5 : 1 on white, too faint for the 3 : 1 a control’s parts need.

A pressed filter should change more than its colour: here it turns dark and its count lightens, and the front end tells screen readers which buttons are pressed (Make changing layouts feel natural).

Focus you can see

People who use a keyboard move through a grid with Tab, and the focus ring is the only way they know where they are. Essential Grid 4.0 draws one: a ring 2 px wide, 2 px away from the filter button or the link that has the focus.

• On the items’ links, the ring takes the link’s text colour.
• On the filter buttons, sort and search, the page numbers and Load more, it takes the outline colour your navigation style or your theme sets; without one, the browser’s default (in some browsers, the text’s colour).

Measure the ring like the button’s edge, against what is around it: at least 3 : 1. The grids above draw their own ring in their CSS, 3 px in a deep orange (#be3702) around the focused button or the whole card: 5.6 : 1 against this page’s white. Tab into them to see it.

Good to know

• Large text needs only 3 : 1, but card titles are rarely large: 24 px and up, or about 19 px in bold. Measure the small line above the title, the date or the category, first: it is the one that fails.
• Text shadows help a little but are hard to measure: the guides’ grids here use none, so the contrast you see is the cover’s.
• Dark text on a light cover works the same way: the cover then has to lighten the darkest spot behind the text enough.
• The 4.0 manual’s Accessibility and reduced motion lists what the front end does for keyboards and screen readers.

Read on

• In the manual: The skin editor, Accessibility and reduced motion, Pagination, Load more and placement, Fonts, colours and icons
• The guides: A colour system for your grid, Make changing layouts feel natural