Readable Dashboard Colors: A Contrast Guide
Cody Castle
•
Guide
A dashboard is not a poster. People read it for hours, in small type, on dense tables, often on a laptop in a bright room. Colors that look striking on a brand board can make a CRM tiring or hard to read. This guide covers the few rules that keep a themed HighLevel account easy to use.
The numbers that matter
Contrast ratio compares the lightness of text with the lightness of what sits behind it. It runs from 1:1, no difference, to 21:1, black on white. The Web Content Accessibility Guidelines (WCAG, level AA) set three thresholds worth remembering:
4.5:1 for normal text: body copy, labels, table cells and links.
3:1 for large text: about 24 pixels regular, or about 19 pixels bold, and larger.
3:1 for interface parts and meaningful graphics: input borders, checkboxes, focus outlines, icons that carry meaning and chart lines.
Most of a CRM is normal-size text, so treat 4.5:1 as the floor almost everywhere. Use a contrast checker and enter hex values instead of judging by eye. Screens differ, and so do eyes.
Check the surface actually behind the text
The most common mistake is checking text against the page background and forgetting everything else. In a themed account, text sits on many surfaces:
the sidebar, including hover and active menu items
the header bar
cards and panels, often a shade off the page background
table rows, including striped, hovered and selected rows
buttons in each state: normal, hover and disabled
dropdowns, menus and dialogs
tags, badges and status labels
Check each pair on its own. White text can pass on your sidebar color and fail on the lighter hover color right next to it.
Light themes
Body text: near-black or a very dark gray on white or off-white. A slightly softer gray can feel calmer over long sessions, as long as it stays above 4.5:1.
Secondary text: hints, timestamps and placeholders are where light themes usually fail. Pale gray placeholder text is often far below 4.5:1. Darken it.
Bright brand colors: yellow, orange, light green and cyan rarely pass as text on white. Use them as fills with dark text on top, not as the text itself.
Borders: card dividers can be subtle, but input borders should reach 3:1 so people can see where to type.
Dark themes
Surfaces: a very dark gray makes layered cards easier to tell apart than pure black. Pure black works too if cards get a visible border.
Text: white or light gray. Keep mid-grays away from anything people need to read.
Brand colors: a deep blue that works for buttons on white can fail as text on a dark background. A lighter tint of the same color usually passes.
Leftovers: check charts, status colors, icons and pop-up menus. Dark themes often leave a few elements with dark text on what is now a dark surface.
Accent overuse
Your brand color gets attention because it is rare. When it fills the sidebar, the header, every button, every link and every icon, nothing stands out and the screen feels loud.
Use the accent for the main action on a screen, the active menu item and focus states.
Keep secondary buttons neutral, with an outline or a gray fill.
Give the accent one job. If it marks buttons, links and status at once, people cannot tell them apart.
Leave success, warning and error colors alone. Red still has to mean a problem.
Never rely on color alone to carry meaning. Pair it with an icon, a label or text.
A ten-minute readability test
Open the busiest screens: contacts, conversations, the pipeline, calendars and settings.
Read the smallest text on each screen from a normal sitting distance.
Hover over and click menu items, buttons and table rows, and read the text in each state.
Open a dropdown and a dialog.
Turn your screen brightness down by half and repeat steps 2 to 4.
Run any pair you hesitated over through a contrast checker and fix the ones under the threshold.
Theme Studio applies your colors to the supported screens with text contrast kept readable, but run this test with your own palette before clients see it.
