Colour Accessibility and Brand Governance for Nonprofit Websites | Socialectric

Most nonprofit brand guides were written before anyone in the organisation had heard of WCAG AA. The colours were chosen because they looked right in a design presentation, not because they met a measurable accessibility standard. The person who chose them probably left years ago. And the Communications Director who inherited the site has no idea whether the blue in the header, the green on the buttons, or the grey used for body text actually passes the contrast requirements that apply to their organisation.

That gap between "looks right" and "meets requirements" is creating regulatory exposure, accessibility failures, and credibility damage that nobody is tracking.

The problem nobody raises until it is too late

Colour is one of those areas where nonprofit websites accumulate quiet failures over years. A designer picks a palette during a rebrand. The colours get embedded into templates, PDFs, social media assets, and the website. Nobody tests whether the chosen shades meet WCAG AA contrast ratios. Nobody documents which hex codes are approved and which are approximations. Nobody checks whether the button text is actually readable against the button background.

Then time passes. Staff turn over. The original brand guide, if one existed, sits in a shared drive nobody opens. Different team members start using slightly different shades of "the blue" because they are picking colours by eye from screenshots rather than from a documented system. The website ends up with four versions of the brand colour across different pages, none of which have been tested for accessibility compliance.

The Communications Director inherits all of this and has no way to defend it if a funder, regulator, or board member asks a pointed question about accessibility.

What WCAG AA actually requires

The standard is specific. Normal body text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt or 14pt bold) must meet 3:1. Interactive elements like buttons and form fields must have 3:1 contrast against adjacent colours.

These are not aspirational targets. For organisations receiving public funding, operating as public bodies, or serving people with disabilities, WCAG AA compliance is a legal expectation under the European Accessibility Act and the Equality Act 2010. And the scale of non-compliance is staggering: the WebAIM Million 2026 report, which analyses the top one million homepages annually, found that 95.9% have detectable WCAG failures. Low contrast text was the single most common failure, appearing on 83.9% of pages tested, with an average of 34 distinct instances per page. This has been the number one accessibility failure on the web for seven consecutive years. Even for organisations not directly covered by these legal frameworks, institutional funders increasingly treat WCAG AA as a baseline. Failing to meet it is a credibility risk regardless of legal obligation.

The most common failures I see are not dramatic. They are subtle. Light grey body text on a white background. White text on a mid-tone brand colour button. Coloured link text that is indistinguishable from surrounding body text. Text overlaid on photographs without a contrast-ensuring layer behind it. Each of these is invisible to the person who built the page, because they were looking at a large monitor in good lighting. They are not invisible to a visitor with low vision, a donor reading on a phone in sunlight, or an accessibility auditor reviewing the site before a funding decision.

What inconsistent colour signals to institutional funders

Colour inconsistency is a brand governance failure, and institutional funders read it as one. When a funder conducting due diligence visits your website and sees three different shades of blue across the homepage, the programmes section, and the governance page, they do not think "the designer made an aesthetic choice." They think: this organisation does not have its house in order.

That reaction is not about design taste. It is about pattern recognition. Funders assess organisations across dozens of signals, and visual consistency is one of them. An organisation that cannot maintain a coherent colour system across its own website raises a reasonable question: if they cannot govern their brand, how well do they govern their programmes?

This is the same credibility logic that applies to logo governance, typography standards, and image ethics. Colour is simply the one that goes unexamined the longest, because it feels like a subjective preference rather than a measurable standard.

The five colour failures I see most often

After auditing nonprofit websites for years, the same failures appear consistently. They are worth listing because most organisations have at least two of them and do not know it.

The first is body text that does not meet 4.5:1 contrast against the background. This usually happens when a designer chooses a medium grey for body text because it looks "softer" than black. It does look softer. It also fails WCAG AA on most background colours. The pattern is remarkably consistent: as accessibility researchers have documented, the five most common WCAG failures all trace back to choices made in the design file before a developer touches the code. Text set to #999999 on a white background produces a contrast ratio of just 2.85:1, well below the 4.5:1 minimum. It is the single most common offender in colour contrast audits.

The second is call-to-action buttons with insufficient text contrast. Brand colour buttons are the most common offender. The organisation's signature green or blue becomes the button background, white text goes on top, and nobody checks whether that specific combination passes 4.5:1. It often does not.

The third is link text that relies on colour alone to be distinguishable from body text. WCAG requires that links be identifiable by something other than colour: an underline, a border, a weight change. Colour-only links exclude anyone who cannot perceive the colour difference.

The fourth is text overlaid on photographs without a contrast layer. Hero sections with a background image and white headline text are ubiquitous on nonprofit websites. Without a semi-transparent overlay or a text shadow ensuring consistent contrast, legibility depends entirely on which part of the image sits behind the text. On some pages it works. On others it is unreadable.

The fifth is using brand colours at full saturation where a tinted or shaded variant would pass. Organisations treat their brand palette as fixed and absolute, when in practice a colour system needs accessible variants: darker shades for text, lighter tints for backgrounds, adjusted values for interactive elements. Modern CSS colour tools, including colour spaces like OKLCH, make it possible to generate perceptually uniform accessible variants that preserve the character of the brand colour without the muddy midtones that older colour models produce. This is a technical implementation detail, but it matters because it means accessible does not have to mean visually compromised.

What to do about it

You do not need to rebuild the site to start addressing colour failures. But you do need to understand the scope of the problem before you can make informed decisions about what to fix. Research from WebAIM suggests that automated testing catches roughly 30 to 40 percent of potential WCAG failures, which means even a quick automated scan will surface the most visible problems. The deeper issues, such as keyboard navigation failures and screen reader incompatibilities, require manual testing. But starting with colour contrast is practical because it is the most prevalent failure and the easiest category to fix: you are changing hex values, not restructuring your site.

Start by checking contrast on your five most-visited pages: homepage, donate, about, one programme page, and contact. Use the WebAIM Contrast Checker. Enter your text colour and background colour and it will tell you whether the combination passes WCAG AA. This takes ten minutes and will give you a clear picture of where you stand.

Then document every colour currently in use on the site. You will likely find more than you expect. Compare what is on the site to what is in the brand guide, if one exists. The gap between the two is a governance finding in itself.

Flag the specific failures to whoever manages the site. Frame this as a compliance and governance conversation, not a design preference. "Our donate button text fails WCAG AA contrast requirements" is a governance finding that demands action. "I think the button colour should be darker" is an opinion that can be overruled.

The distinction matters. Design decisions framed as governance obligations get acted on. Design decisions framed as aesthetic preferences get deprioritised indefinitely.

Question 1: Do WCAG colour contrast requirements apply to my nonprofit?

Yes, if you receive public funding, serve people with disabilities, or operate in a jurisdiction covered by the Equality Act 2010 or the European Accessibility Act. Even if you are not legally required to comply, institutional funders increasingly expect WCAG AA as a baseline. The credibility cost of failing to meet it applies regardless of legal obligation.

Question 2: Our brand guide specifies colours that fail contrast checks. What do we do?

This is more common than most organisations realise. The solution is not to abandon the brand. It is to create accessible variants: darker shades for text use, lighter tints for backgrounds, adjusted saturation for interactive elements. A brand colour can be preserved while its application is made compliant. This is a design governance decision, not a rebrand.

Question 3: How do I know if my website's colours are accessible without technical expertise?

Use the WebAIM Contrast Checker. Enter your text colour and background colour and it tells you whether the combination meets WCAG AA. Check at minimum: body text, heading text, button text, link text, and any text overlaid on images. If any of those fail, you have a finding that needs to be raised with whoever governs your website.

If you are not certain whether your website's colour usage meets accessibility standards, or if you suspect the brand colours inherited from a previous era are creating compliance risk you have not quantified, a Blueprint Audit identifies exactly where the failures are and what they mean for your organisation's credibility and regulatory exposure.