SuiteCRM theme contrast: the colour pairs to check for WCAG AA

What contrast does a SuiteCRM theme need for WCAG AA?

A SuiteCRM theme needs a contrast ratio of at least 4.5:1 between normal text and its background to meet WCAG 2.2 Level AA. In a SuiteP-based theme that applies to 26 text and background pairs, including navbar text, tab labels, list headers and five kinds of button label. Stock Dawn's default button label measures only about 2.3:1.

The rule

Contrast ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 success criterion 1.4.3 sets 4.5:1 as the minimum for normal text at Level AA. Almost all CRM interface text is normal size, so 4.5:1 is the number to hold every pair to.

In a CRM this matters more than on a website. Staff read the same screens for hours, often on uncalibrated office monitors, and a brand colour that looks fine in a logo can make a navigation bar unreadable once white or grey text sits on it.

Every pair to check in a SuiteCRM theme

These are the text and background combinations a SuiteP theme (SuiteCRM 7, and the classic views of SuiteCRM 8) actually draws. Check each one with any WCAG contrast checker:

Where brand colours usually fail

• Button labels. In SuiteP the primary, danger, success and info buttons all take their label colour from one variable, $default-btn-color, rather than each choosing white or black. Make the primary button your light brand colour and its label can drop well below 4.5:1 while the others look fine.
• The stock defaults. Dawn's own default button label, #f5f5f5 on #94a6b5, is about 2.3:1. Starting from Dawn does not mean starting from a passing theme.
• Mid-tone navbars. Medium blues, greens and oranges sit in the band where neither white nor dark text reaches 4.5:1. Darken the navbar a step, or switch the text colour.
• Hover states. A colour that passes at rest can fail on hover. Check the hover colour against the background it actually sits on.

Fixing a colour that fails

1. Keep the hue, change the lightness. Darken the background (or lighten it, for dark text) in small steps until the pair passes; the colour still reads as your brand.
2. Flip the text colour. If dark text passes where white does not, use dark text on that surface.
3. Recheck every pair the change touches. One background usually carries several text colours, so fixing one pair can break another.

Brandtint does this automatically: it adjusts colours pair by pair until every enforced pair passes 4.5:1, and shows you the worst ratio on the page before you download. Over 2,000 random test schemes, none finished with a failing pair. See it on your own logo.