
Accessibility
Overview
Improving Green Usage
for WCAG-compliance
Organization: Citron Hygiene, a company providing commercial washroom hygiene solutions.
Challenge: The brand had been using green text and green icons on white backgrounds in many parts of its visual identity and user interface / website. The shade(s) of green used were often light / mid-tone, which when placed as text on white failed accessibility contrast tests.
Before launch of a redesigned website by an external agency, much of the copy, buttons, icons, etc. used green on white (often without enough contrast).

My Role
I acted as the internal design brand steward before launch, advocating that “this fails accessibility tests” where it applied. This involved bringing it up several times to the marketing team and the agency we were using, until it was understood.
I helped evolve the brand palette and usage rules to ensure green was used in accessible ways.
Problems
-
Low Contrast Text: Green text at small sizes on white had insufficient contrast (below WCAG 2.1 AA minimum 4.5:1). Users with low vision or in bright sunlight / glare would struggle.
-
Icons & UI Elements: Green icons or graphical elements with fine lines or small areas of green on white similarly were hard to see.
-
Color Hierarchy / Visual Weight: Because green was brand-primary and used liberally, nothing else stood out properly; important content (links, calls-to-action) got visually lost or were weak.
-
Agency’s Designs Overlooked Accessibility: The external agency’s initial designs had multiple components that failed contrast—buttons, headers, icons, etc.

Solution

Evolution of Green Usage
-
Audited all instances of green on white: text, icons, buttons, UI components. Measured contrast ratios using tools (e.g. WCAG contrast checker). Identified fail points.
-
Began updating style guide to include rules such as:
1. Never use the green for text on white
2. Use green for purely decorative accents -
Collaborated with the agency during the redesign: reviewed mockups, surfaced the contrast issues, suggested solutions as needed, pushed for adjustments before launch.
Outcomes
-
All text on the website now meets WCAG AA standard for contrast (including small body text), which improved readability and user experience, especially for people with low vision or colour vision deficiencies.
-
Design retains brand green, but with smarter use: used for accent, for background fills, but where necessary, substituted grey or blue for text.
-
Improved hierarchy/visual clarity: CTAs, navigation, clickable elements stand out more.
-
Avoided potential legal/compliance risk; better inclusion.
Lesson Learned


-
Brand colours are vital, but often the “brand green” isn't enough contrast for every usage context. Always test.
-
Style guides / brand guidelines should include not just colours, but contrast-tested variants and rules for when to use which variant.
-
Catching accessibility issues early (before site launches) is far less expensive and disruptive than fixing after deployment.
-
Education is part of the job: many designers/agencies think green looks good, but not everyone remembers the contrast rules or tools. Embedding that into review process helps.
-
The Citron logo’s green “o” does not meet WCAG contrast minimums against white. When this was identified, we discussed updating the mark but ultimately decided not to prioritize it due to cost and logistics — particularly the extensive fleet of branded trucks and signage already in use. While logos are technically exempt from WCAG contrast requirements, it remains an opportunity for future refinement as part of a broader rebrand to improve accessibility consistency. While not required, it is still a good practice to design logos with high contrast to make them more perceptible to all users.
-
This experience reinforced how critical it is to address accessibility early in the branding process. Had these considerations been built into Citron’s original rebrand (which predated my involvement), the company would have been positioned as accessibility-first from the start — rather than having to balance design improvements against existing brand investments and cost constraints.