Color contrast for digital signage: readable color combinations and contrast ratios
Quick answer: DigitalSignage.com recommends a contrast ratio of at least 7:1 between text and background on digital signage, above the WCAG 2.2 minimum of 4.5:1 for normal text and 3:1 for large text, because glare and room light reduce the contrast a viewer actually sees. White on black is 21:1, black on yellow 19.56:1 and white on navy #003366 12.61:1. Pure red on white is only 4.00:1 and orange #FF6600 on white 2.94:1, so both fail for body text.
Key facts
- WCAG 2.2 success criterion 1.4.3 sets 4.5:1 for normal text and 3:1 for large text, and criterion 1.4.6 sets the enhanced level at 7:1 and 4.5:1.
- The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors, so the scale runs from 1:1 to 21:1.
- In an illustrative model of a 500-nit screen, 50 nits of reflected room light cuts white on #767676 from 5.52:1 to 3.91:1.
- Grey #767676 is the lightest grey that passes 4.5:1 on white (4.54:1), and #595959 is the lightest that reaches 7:1 (7.00:1).
- Red #FF0000 on green #008000 has a contrast ratio of only 1.28:1, so the pair relies on hue alone and fails for viewers with red-green color vision deficiency.
- Yellow #FFFF00 on white is 1.07:1, close to invisible, while the same yellow on black is 19.56:1.
- Every ratio on this page was computed with the WCAG relative-luminance formula on October 25, 2026.
Last updated October 25, 2026.
What contrast ratio does digital signage text need?
Digital signage text needs at least 4.5:1 contrast to meet WCAG 2.2 level AA, and a working target of 7:1, the level AAA figure, because screens are viewed from a distance, at an angle and under glare. Large headlines and non-text graphics such as icons and chart bars need at least 3:1.
WCAG, the Web Content Accessibility Guidelines published by the W3C, is written for web pages, but its contrast criteria are the most widely used numeric reference for any text on a screen. Accessibility checklists for signage, including our accessibility guide and the ADA requirements page, use the same ratios.
| WCAG 2.2 criterion | Applies to | Minimum ratio | Signage target |
|---|---|---|---|
| 1.4.3 Contrast (Minimum), level AA | Normal text | 4.5:1 | 7:1 |
| 1.4.3 Contrast (Minimum), level AA | Large text (18 pt, or 14 pt bold) | 3:1 | 4.5:1 |
| 1.4.6 Contrast (Enhanced), level AAA | Normal text | 7:1 | 7:1 or more |
| 1.4.6 Contrast (Enhanced), level AAA | Large text | 4.5:1 | 7:1 for headlines viewed from far away |
| 1.4.11 Non-text Contrast, level AA | Icons, arrows, chart parts, button edges | 3:1 | 4.5:1 |
Bottom line: 4.5:1 is the compliance floor and 7:1 is the design target, for body text and far-viewed headlines alike.
The large-text exception needs care on signs. WCAG defines large text by point size on a web page read at arm's length. A 96-point headline on a screen 30 feet away looks about as large to the eye as small print on a phone, so the exception that lets large text drop to 3:1 does not really apply. Size text from the viewing distance using the typography and viewing distance guide, then hold all text to 4.5:1 or better.
How is a contrast ratio calculated?
A contrast ratio compares the relative luminance of two colors: add 0.05 to each, then divide the lighter by the darker. Relative luminance is a weighted sum of the linearised red, green and blue channels, with green weighted most because the eye is most sensitive to it.
The steps, as WCAG defines them for sRGB colors:
- Divide each 8-bit channel by 255 to get a value between 0 and 1.
- Linearise each channel: if the value is 0.04045 or less, divide it by 12.92; otherwise compute ((value + 0.055) / 1.055) raised to the power 2.4.
- Relative luminance L = 0.2126 x R + 0.7152 x G + 0.0722 x B, using the linearised values.
- Contrast ratio = (L of the lighter color + 0.05) / (L of the darker color + 0.05).
White has a luminance of 1 and black 0, which is why the maximum ratio is 1.05 / 0.05 = 21:1. The 0.05 term models a small amount of flare in the viewing environment. The weights explain surprises: pure red #FF0000 has a luminance of only 0.2126 and pure blue #0000FF only 0.0722, so both are much darker than they look, and pure blue on black is just 2.44:1.
Why does digital signage need more contrast than print or a website?
Signage needs more contrast because the ratio a viewer actually sees is lower than the ratio in the design file. Reflected room light, sunlight through windows and off-angle viewing all add light to the dark parts of the image, which compresses the ratio, and distance makes thin strokes harder to separate from the background.
A simple model shows the effect. Treat each color's on-screen brightness as its relative luminance times the panel's white level, then add the same reflected light to both colors. The table models a 500-nit display with a native panel contrast of 1,000:1 (black at 0.5 nits). It is an illustration of the physics, not a measurement of any particular screen, and its ratios are physical luminance ratios rather than WCAG ratios.
| Reflected room light (illustrative) | White on #767676 | White on #0066CC | White on #1A1A1A | White on panel black |
|---|---|---|---|---|
| 0 nits, dark room | 5.52:1 | 7.21:1 | 96.8:1 | 1,000:1 |
| 10 nits, dim office | 5.07:1 | 6.43:1 | 33.6:1 | 48.6:1 |
| 50 nits, bright office or lobby | 3.91:1 | 4.61:1 | 9.97:1 | 10.9:1 |
| 150 nits, near a sunny window | 2.70:1 | 2.96:1 | 4.19:1 | 4.3:1 |
Bottom line: a pair that passes 4.5:1 on paper can fall under 3:1 near a window, so start at 7:1 or more and add brightness or anti-glare treatment where light is strong.
Viewing angle adds to the loss. Many LCD panels lose contrast and shift color when viewed from far to the side or from below, and the dark end suffers most. Older viewers need more contrast too, because the lens of the eye scatters more light with age. None of these effects can be fixed in the color file alone, which is why the design target sits well above the minimum.
Brightness and contrast interact. A brighter screen raises the light colors above the reflected light, which restores some of the lost ratio. The display brightness guide gives the nits needed by location: 350 to 500 for offices and corridors, 700 to 1,500 near large windows, and 2,500 to 4,000 for storefronts facing out through glass.
Which color combinations are most readable on digital signs?
The most readable combinations pair a very dark color with a very light one: white or yellow text on black, navy or charcoal, and black text on white, yellow or amber. All of the pairs below were computed with the WCAG formula and clear 7:1, the signage target, unless the verdict says otherwise.
| Text color | Background | Contrast ratio | WCAG level for normal text | Verdict for signage |
|---|---|---|---|---|
| White #FFFFFF | Black #000000 | 21.00:1 | AAA | Maximum; bold weights avoid glow at high brightness |
| Black #000000 | Yellow #FFFF00 | 19.56:1 | AAA | Strongest attention pair; warnings and prices |
| White #FFFFFF | Charcoal #1A1A1A | 17.40:1 | AAA | Softer than pure black, still excellent |
| Charcoal #1A1A1A | Off-white #F5F5F5 | 15.96:1 | AAA | Best dark-on-light choice for bright rooms |
| Black #000000 | Gold #FFD700 | 14.97:1 | AAA | Warm alternative to pure yellow |
| White #FFFFFF | Navy #003366 | 12.61:1 | AAA | Corporate and healthcare default |
| White #FFFFFF | Dark grey #333333 | 12.63:1 | AAA | Neutral backgrounds |
| Amber #FFB000 | Charcoal #1A1A1A | 9.50:1 | AAA | Transit and menu boards |
| White #FFFFFF | Purple #6A1B9A | 9.39:1 | AAA | Brand accent panels |
| White #FFFFFF | Dark red #B00020 | 7.33:1 | AAA | Sale and alert banners |
| White #FFFFFF | Dark blue #005A9C | 7.14:1 | AAA | Brand blue that reaches the target |
| White #FFFFFF | Blue #0066CC | 5.57:1 | AA only | Acceptable for large text; darken for body text |
| White #FFFFFF | Green #2E7D32 | 5.13:1 | AA only | Darken further for body text on signs |
| White #FFFFFF | Red #D32F2F | 4.98:1 | AA only | Headlines only |
Bottom line: white on black, black on yellow and white on navy give 12:1 to 21:1, while mid blues, greens and reds land between 4.98:1 and 5.57:1 and need darkening to reach 7:1.
Brand colors often sit in that middle band. The fix is rarely to abandon the brand: keep the brand color for large blocks, logos and backgrounds behind white bold headlines, and use a darker shade of the same hue behind body text.
Which color combinations should you avoid on digital signage?
Avoid pairs whose two colors have similar luminance, even when the hues look different: red on green, blue on red, yellow on white and light grey on white all fall below 3:1. They may look acceptable on a designer's monitor and fail on a screen across a bright room.
| Text color | Background | Contrast ratio | Problem |
|---|---|---|---|
| Yellow #FFFF00 | White #FFFFFF | 1.07:1 | Nearly invisible |
| Red #FF0000 | Green #008000 | 1.28:1 | Same luminance; unreadable for red-green color blindness |
| Light grey #CCCCCC | White #FFFFFF | 1.61:1 | Washes out under any glare |
| Blue #0000FF | Red #FF0000 | 2.15:1 | Low contrast and visual vibration at edges |
| Blue #0000FF | Black #000000 | 2.44:1 | Pure blue is very dark |
| White #FFFFFF | Orange #FF6600 | 2.94:1 | Fails 3:1; use black text on orange instead (7.15:1) |
| White #FFFFFF | Red #FF0000 | 4.00:1 | Fails 4.5:1 for body text |
Bottom line: if two colors have luminance values close together, no hue difference will save them; flip one to near black or near white.
Text over photos and video is the other common failure, because the background changes from frame to frame. Place text on a solid or semi-opaque panel, or add a dark scrim over the image, and check the ratio against the lightest part of the image that sits behind the letters.
What colors are safe for color-blind viewers?
Color-blind safe signage depends on luminance contrast, not hue: if a pair passes 4.5:1 it stays readable for viewers with any common color vision deficiency, because those viewers still see the lightness difference. Never use color alone to carry meaning, such as red for closed and green for open; add a word or an icon.
Red-green deficiency is the most common type, and the commonly cited figures are about 1 in 12 men and 1 in 200 women of Northern European ancestry. For charts, maps and status colors, the Okabe-Ito palette was designed to stay distinguishable for these viewers. Its ratios against black and white, computed with the WCAG formula, show which text color each one needs:
| Okabe-Ito color | Hex | On white | On black | Text color to use on it |
|---|---|---|---|---|
| Orange | #E69F00 | 2.25:1 | 9.32:1 | Black |
| Sky blue | #56B4E9 | 2.31:1 | 9.10:1 | Black |
| Bluish green | #009E73 | 3.42:1 | 6.14:1 | Black, large text |
| Yellow | #F0E442 | 1.32:1 | 15.88:1 | Black |
| Blue | #0072B2 | 5.19:1 | 4.05:1 | White |
| Vermillion | #D55E00 | 3.87:1 | 5.43:1 | Black |
| Reddish purple | #CC79A7 | 3.06:1 | 6.86:1 | Black |
Bottom line: six of the seven Okabe-Ito colors read best with black text, and only the blue takes white text, at 5.19:1.
Should digital signage use dark or light backgrounds?
Use dark backgrounds with light text for most signage, especially on LED walls and in dim or mixed lighting, and dark text on light backgrounds for bright rooms with lots of small text, such as menus near windows. Both orientations give the same contrast ratio; the difference is how glare, power and glow behave.
| Factor | Dark background, light text | Light background, dark text |
|---|---|---|
| LED walls | Preferred: emissive LEDs draw less power on dark pixels and avoid glare at night | Very bright, can dazzle in dim spaces |
| LCD panels | Good; black level rises with reflections and off-angle viewing | Good in bright rooms; hides reflections better |
| Night and dim rooms | Comfortable | Glaring unless brightness is dimmed |
| Small dense text, bright room | Thin light strokes can glow and blur at high brightness | Usually crisper |
| Static layouts left on for hours | Static logos and bars still need content rotation | Static logos and bars still need content rotation |
Bottom line: dark backgrounds are the default, light backgrounds win for dense text in bright rooms, and either way the ratio should be 7:1 or more.
Light text on a dark background can appear to glow or bleed at high brightness, an effect called halation that is stronger for people with astigmatism. A slightly heavier font weight and a little extra letter spacing counter it. The best fonts for digital signage page covers weights in detail.
Worked example: does white text on a brand blue pass?
A clinic wants white body text on its brand blue, #0066CC, on a 55-inch screen in a bright waiting room. Here is the calculation step by step.
| Step | Calculation | Result |
|---|---|---|
| 1. Channels of #0066CC | R = 0 / 255, G = 102 / 255, B = 204 / 255 | 0, 0.400, 0.800 |
| 2. Linearise | G: ((0.400 + 0.055) / 1.055) ^ 2.4; B: ((0.800 + 0.055) / 1.055) ^ 2.4 | R 0, G 0.1329, B 0.6038 |
| 3. Relative luminance | 0.2126 x 0 + 0.7152 x 0.1329 + 0.0722 x 0.6038 | L = 0.1386 |
| 4. Contrast with white (L = 1) | (1 + 0.05) / (0.1386 + 0.05) | 5.57:1 |
| 5. Check against the target | 5.57 is above 4.5 but below 7 | Passes AA, misses the 7:1 signage target |
| 6. Try a darker shade, #005A9C | G 0x5A = 0.1022, B 0x9C = 0.3325 linear; L = 0.7152 x 0.1022 + 0.0722 x 0.3325 | L = 0.0971 |
| 7. New ratio | (1 + 0.05) / (0.0971 + 0.05) | 7.14:1, passes the target |
Bottom line: darkening the blue from #0066CC to #005A9C moves white text from 5.57:1 to 7.14:1 while keeping the same hue family, so the clinic keeps its brand and gains readability.
In the illustrative glare model above, the original pair would drop to about 4.61:1 in a bright 50-nit room, barely above the minimum. The darker shade keeps a margin. The clinic keeps #0066CC for the logo bar and large headlines, where 5.57:1 is ample, and uses #005A9C behind every line of body text.
How to do this in DigitalSignage.com
In DigitalSignage.com you set text and background colors in the SignStudio scene editor, where the documented text styling options include color by hex value, RGB or a picker, text shadow and an outline stroke, and zones and shapes take a solid background color or image.
- Pick your pair from the tables above and type the exact hex values into the text color and background fields of the SignStudio scene editor.
- For text over photos or video, place a solid or semi-opaque shape behind the text, or use the outline option to add a dark stroke around light letters.
- Publish to one screen and check the result at the real distance and in the real light, including at the brightest time of day.
- Keep a short list of approved pairs with their ratios in your brand guide so every editor uses the same colors.
A built-in contrast ratio checker inside SignStudio is not described in our documentation; ask support (support@digitalsignage.com, live chat at https://chat.digitalsignage.com/). Any WCAG contrast checker that accepts hex values gives the same result as the formula on this page.
Frequently asked questions
Color contrast for digital signage: what are readable color combinations and contrast ratios?
Readable combinations pair a very dark color with a very light one and reach at least 7:1, the recommended signage target. White on black is 21:1, black on yellow 19.56:1, white on charcoal #1A1A1A 17.40:1 and white on navy #003366 12.61:1. The WCAG 2.2 minimum is 4.5:1 for normal text and 3:1 for large text, but glare on screens lowers the contrast viewers see, so aim higher.
What is the best text color for a digital sign?
White or yellow text on a dark background, or near-black text on a light background, are the most readable choices. White on black gives the maximum 21:1, and black on yellow gives 19.56:1 for high-attention messages such as prices and warnings. Choose by the room: dark backgrounds for LED walls and dim spaces, light backgrounds for dense text in bright rooms.
Is 4.5:1 contrast enough for digital signage?
It is the legal and WCAG AA minimum for normal text, but it leaves no margin for glare. In an illustrative model of a 500-nit screen, a 4.54:1 pair drops to about 3.91:1 when 50 nits of room light reflects off the panel. Use 7:1 as the design target so text stays above 4.5:1 in real conditions.
How do you calculate a contrast ratio?
Convert each color to relative luminance: divide each RGB channel by 255, linearise it (divide by 12.92 if 0.04045 or less, otherwise ((value + 0.055) / 1.055) to the power 2.4), then compute 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (lighter L + 0.05) divided by (darker L + 0.05). White on #0066CC works out to 1.05 / 0.1886 = 5.57:1.
Which colors should never be used together on a screen?
Avoid pairs with similar luminance: yellow on white (1.07:1), red on green (1.28:1), light grey #CCCCCC on white (1.61:1), blue on red (2.15:1) and white on bright orange #FF6600 (2.94:1). Red and green together also fail for viewers with red-green color vision deficiency. If two colors are close in lightness, make one near black or near white.
Is red text on white readable on digital signage?
Pure red #FF0000 on white is only 4.00:1, which fails the 4.5:1 minimum for body text. A darker red such as #B00020 reaches 7.33:1 against white and works for banners and body text. Reserve bright red for large blocks of color with white bold text on top, and check every shade with the WCAG formula.
Are dark backgrounds better for LED video walls?
Usually yes. LED walls are emissive, so dark pixels draw less power and a mostly dark layout avoids dazzling viewers in dim spaces or at night. Light text on dark can glow at high brightness, so use a slightly heavier weight and dim the wall to suit the room. The contrast target stays the same, 7:1 or more.
Related guides
- Typography and viewing distance: text sizes that go with these contrast targets
- Digital signage accessibility guide: the full checklist beyond contrast
- ADA accessibility requirements for digital signage: legal context in the United States
- Display brightness in nits: brightness by location, which protects contrast in bright rooms
- Accessible signage for blind and low-vision audiences: designing for low vision
- LED display technology: how emissive LED walls handle dark and light content
- SignStudio scene editor: text color, shadow and outline settings
- Best fonts for digital signage: weights and letter shapes that hold up at distance
- QR code size and scan distance: contrast rules for scannable codes
Try it on your own screens, free
DigitalSignage.com, which publishes this guide, runs a permanent free plan: the first 3 screens are free forever (no credit card, no ads, no time limit), then from $3 per screen per month with volume pricing via a public calculator. The free SignPlayer runs on Windows, Mac, Android and Android TV, Chrome OS, Raspberry Pi, iPad or any modern web browser, so the hardware you already own usually works. Start free · 2026 pricing · How 11 vendors compare on price
This guide is maintained by MediaSignage, pioneers of digital signage technology since 2006.