What contrast ratio should a clock display use?

At least 3:1, which is the accessibility requirement for large text, but a clock should aim far higher. White on black gives roughly 21:1 and is readable by almost everyone. Reduce contrast only for a specific reason, such as a dim bedside display in a dark room.

Which colour is best for a clock display?

White or light grey on black for daytime legibility, and dim red on black at night. Choose by brightness rather than hue: pure blue on black is only around 2.4:1 and fails the large-text contrast requirement, so it looks striking up close and disappears across a room.

Do colour-blind viewers have trouble reading clocks?

Not if the display relies on light and dark rather than hue. Around one in twelve men has some colour vision deficiency, usually red-green, but luminance perception is largely unaffected. Problems only arise when a coloured digit sits on a coloured background of similar brightness.

Should a clock show seconds?

Only when they are needed. A seconds field changes sixty times a minute, which is a persistent distraction in peripheral vision and of no use for most purposes. Hiding seconds makes the display calmer, and any clock should let you switch them off rather than forcing them on.

Clock Accessibility and Contrast

A clock has one job, and it fails completely if somebody cannot read it. Clock accessibility is unusually simple to get right compared with most interface work, because there is only one piece of content on the screen and no interaction to speak of. The whole problem reduces to four decisions: how much contrast, which colours, how large, and how much movement.

This article works through each of those with the numbers that matter, including the contrast ratios required by the accessibility guidelines and what they mean for coloured digits on a dark background. You can apply everything here directly on the customisable digital clock, which exposes colour, font and size as settings.

What Contrast Ratio Does a Clock Need?

WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and clock digits are large text by any measure. That 3:1 is an accessibility floor rather than a design target, and a clock has no reason to sit anywhere near it.

Contrast ratio compares the relative luminance of two colours on a scale from 1:1, where they are identical, to 21:1, which is pure white against pure black. Large text is defined as roughly 18 point, or 14 point bold, which any clock exceeds by a wide margin. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text, and a well-configured clock passes that without effort. The practical advice is to start from white or a very light grey on black, at something close to 21:1, and only reduce it for a specific reason such as a dim bedroom. Softening pure white to a light grey costs very little contrast and takes the glare off a large panel in a dark room.

Which Colours Survive Colour Blindness?

Choose by luminance rather than by hue, and no clock accessibility problem involving colour vision will arise. Around one in twelve men and one in two hundred women have some colour vision deficiency, most commonly in the red-green range, but almost everyone perceives light and dark alike.

The luminance figures are worth knowing, because they are counterintuitive. On a black background, pure green reaches roughly 15:1, pure red about 5:1, and pure blue only around 2.4:1, which fails even the large-text threshold. Blue digits on black look striking on a designer's monitor and are close to unreadable across a room. The rule that follows is simple: never rely on hue alone to carry information, and check that whatever colour you choose is bright enough against its background rather than merely different from it.

White or light grey on black: the safest choice at roughly 21:1, and readable by everyone.
Amber or yellow on black: high luminance, warm, and easier on the eye in the evening than white.
Green on black: strong contrast and the classic terminal look, though it can be tiring at large sizes.
Red on black: around 5:1, acceptable for large digits and the right choice at night for reasons of sleep rather than legibility.
Blue on black: avoid. Its luminance is too low to make a readable clock at any size.

Size and Viewing Distance

Size the digits for the furthest person who will read them, using about one inch of height per ten feet of distance, or 25 mm per three metres. Then add margin, because that rule describes the threshold of legibility rather than comfort.

Anyone with reduced vision needs considerably more than the threshold size, and so does anyone reading in a hurry or at an angle. Doubling the calculated size costs nothing on a screen that has nothing else to show. Stroke weight matters alongside height: a thin face at the correct size can still be unreadable when a bolder one at the same height is clear, particularly on a projector or through the compression of a video stream. For a room full of people at different distances, size for the back and let the front row have a clock that is bigger than it needs to be. The room-by-room version of this is in classroom clock displays.

Numerals and Fonts: The Overlooked Part of Clock Accessibility

Some numeral shapes are simply harder to tell apart than others, and a clock only ever shows numerals, so the choice of typeface carries more accessibility weight here than it would in ordinary text.

Seven-segment styles are handsome and evocative, but six, eight and nine differ by a single bar, which makes them the least forgiving option at distance, as set out in digital clock fonts and the seven-segment display. Clear, open numeral shapes help everyone and matter more for readers with dyslexia, for whom confusable characters slow reading down; the evidence for special dyslexia-branded typefaces is mixed, whereas generous size, spacing and unambiguous letterforms reliably help. Tabular figures are worth switching on for a different reason: when every numeral has the same width, the digits stop shuffling sideways as the minutes change, and a display that holds still is easier to read at a glance and less distracting in peripheral vision.

Avoiding Motion That Distracts

Give people a way to switch the movement off, because motion is the accessibility problem most clock designs create for themselves. A seconds field changes sixty times a minute and a blinking colon twice a second, and for anyone whose attention is drawn by motion that is a constant low-level tax on concentration.

There is a hard safety limit as well: the accessibility guidelines state that content must not flash more than three times in any one second, because faster flashing can trigger seizures in people with photosensitive epilepsy. A clock should never come close to that, but it rules out anything that strobes to mark the hour. Beyond safety, the sensible defaults are seconds hidden unless they are needed, no blinking separator, and no animated transitions between digits. A clock that changes only once a minute is calmer to sit beside, and every accessibility preference is remembered in the browser's localStorage so nobody has to set it twice.

Clock Accessibility at Night

Night use inverts one of the clock accessibility rules. In a dark room the eye is dark-adapted, so a display at daytime contrast is painfully bright, and turning the brightness down is more useful than maximising the ratio between digits and background.

This is the one case where a lower-contrast, low-luminance display is the accessible choice rather than a compromise, and it is why bedside displays are conventionally dim and red. The reasoning behind that colour is covered in red light bedside clocks and sleep, and the settings are ready-made on the night mode clock. During the day, switch back to a high-contrast display: a single device can be configured differently for each, including on the fullscreen clock, so neither situation has to compromise for the other.

Conclusion

Clock accessibility comes down to four settings and one principle. Use a contrast ratio well above the 3:1 minimum for large text, choose colours by luminance rather than hue so colour-blind viewers are unaffected, size the digits generously for the furthest reader, and keep motion to a minimum with an option to hide seconds entirely. The principle is that a clock exists to be read at a glance by anyone in the room. Configure yours on the customisable digital clock, or pick the display mode that suits at digitalclock.now.

Clock Accessibility: Contrast, Colour and Readable Digits