Accessibility in Practice

Color Contrast and Legibility on Exhibit Screens

How to choose text and background colors, type sizes and layouts so exhibit screens stay readable in real gallery conditions, from dim rooms to bright glass.

On this page
  1. Why contrast matters more in a gallery than on a desk
  2. Start from a measurable target
  3. Choose a text and background strategy
  4. Watch the backgrounds behind text
  5. Type choices that help
  6. Do not rely on color alone
  7. Account for the room, not just the file
  8. Think about who is reading
  9. Build contrast into your review process

Most people have read a poorly contrasted web page and simply squinted. In a gallery the same problem is harder to escape. Visitors stand at an angle, they may be holding a bag or a child, the room is often dim, and a spotlight or window may be adding reflections. A color pairing that looks fine on a designer’s monitor can fall apart under those conditions.

Contrast is the difference in brightness between text and the area behind it. It is not the same as how colorful or how different two hues look. Red text on a green background can be very distinct in hue and still be nearly unreadable, because the two colors may have a similar brightness. That is also why such a pairing fails for visitors with common forms of color vision deficiency.

Start from a measurable target

Published web accessibility guidelines express contrast as a ratio between the lighter and darker color. A commonly cited target is at least 4.5 to 1 for ordinary body text and at least 3 to 1 for large text and for important interface graphics such as icons and button outlines. Many free tools described as contrast checkers calculate the ratio from two color values, and checking every text and background pairing in a design takes only a few minutes.

Treat those numbers as a floor rather than a goal. Exhibit screens are viewed from further away than a laptop, in poorer light, by a wide range of ages. Aiming well above the minimum for body text is a sensible and inexpensive choice. Pure black on pure white gives the highest ratio, but many designers soften it slightly to reduce glare, which is fine as long as the ratio stays comfortably high.

Choose a text and background strategy

Both polarities can work.

  • Dark text on a light background usually reads well in bright rooms and is familiar from printed labels. On a large bright screen in a dark gallery, though, it can feel like a lamp and may tire the eyes.
  • Light text on a dark background suits dim spaces and reduces the glow of a large display. Thin light strokes on black can appear to bloom or blur, especially for people with astigmatism, so use a slightly heavier weight.

Whichever you pick, stay consistent across the exhibit. Switching polarity from one screen to the next makes visitors re-adjust their eyes.

Watch the backgrounds behind text

Text laid over a photograph or video is the most common legibility failure. The brightness of the image changes from pixel to pixel, so contrast changes along a single line of text. Some reliable fixes:

  • Place text on a solid panel or a semi-opaque band instead of directly on the image.
  • Keep captions and labels in a fixed area that is never covered by moving content.
  • Avoid gradients and patterns behind body text.
  • Test over the brightest and darkest frames of any video, not just the opening frame.

Type choices that help

Contrast works together with the shape and size of the letters.

  • Size: Body text on a wall-mounted or standing screen is usually set larger than on a phone, because the viewing distance is greater. Decide the intended viewing distance first, then test with real people at that distance.
  • Typeface: Plain, open letterforms with generous spacing are usually easier than decorative or condensed faces. Avoid ambiguity between similar characters such as capital I, lowercase l and the number 1.
  • Weight: Regular or medium weights are usually safer than very light weights, and bold works for short emphasis rather than whole paragraphs.
  • Line length and spacing: Shorter lines and generous space between lines help people keep their place. Left-aligned text is generally easier to follow than fully justified text, which can create uneven gaps.
  • Capitals: Long passages in all capitals are slower to read. Reserve them for very short labels, if at all.

Do not rely on color alone

Color should never be the only way to convey meaning. If a correct answer is green and a wrong answer is red, add an icon, a word or a shape as well. The same applies to chart legends, map keys and status indicators. A quick test is to view the design in grayscale: if information disappears, it depends too much on hue.

Account for the room, not just the file

The numbers in a design file describe an ideal screen. The visitor sees the screen after it has been affected by brightness settings, panel type, viewing angle and reflections. Problems with screen glare can lower effective contrast far more than a slightly weak color pairing, so it is worth reading about glare control and the trade-offs between display types when choosing hardware. A glossy panel and a matte panel can give very different results under the same lights.

The most useful check is also the simplest. Open the exhibit in the gallery at the time of day when it is brightest and at the time when it is dimmest, and read it from the distance and height where visitors will stand or sit. Ask someone who did not make the design to read a sample paragraph aloud.

Think about who is reading

Many visitors do not see the screen as the designer does. Older adults often need more light and higher contrast to read comfortably, and people with reduced vision may rely on large text and strong contrast to use an exhibit at all. Small, light gray text, which is popular in contemporary design, is a common cause of difficulty. Interactive controls need the same attention: buttons that are legible and large enough, in line with guidance on touch targets, help every visitor, not only those with a recognized need.

Build contrast into your review process

An accessibility checklist for a project should list contrast checks as a specific line item, to be repeated whenever colors, content or lighting change. Check:

  1. Every text and background pairing against a chosen ratio.
  2. Text over images and video at their worst frames.
  3. Meaning conveyed without relying on color.
  4. Readability in the real room, at the real distance.
  5. Idle and attract screens, where designers often use stylish but faint text.

Doing this at the design stage costs very little. Finding a problem after installation usually means reworking artwork and re-approving content.

Keep exploring

Guides from other topics

All topics →