Go to page contents.

Web Standards

Help with Web Standards

On this wiki

Wiki language

State Services Commission.

Comments: 2.2 Contrast between foreground and background colours

You can edit this page. Please sign your contribution by adding --~~~~ after your comments.

Contents

Testing criteria

This Standard has no measurement criteria associated with it.

I think, as someone for whome colour contrast is an issue, that the higher threshold is better. I tend to use the Vision Australia colour contrast analyser this link, which also analyses for the most common forms of colour blindness. If a combination fails the higher threshold it tends to fail on at least one of the major forms of colour blindness.
If a separate high contrast style sheet is added there would need to be more than one version as some of us pesky partials need light on dark and some need dark on light. I am in the latter category. Also high contrast tend to be text only which has its own pitfalls, there can be a lack of visual cues for those of us who like them. So lets go for the higher threshold and be creative with the use of colour, and let's reverse the greying of the Internet. Robyn Hunt 16:08, 15 November 2007 (NZDT)

Here's the issue. There's a generally accepted algorithm for measuring 'sufficient' contrast. It measures the colour differential (separation of the two colours on the spectrum), and the brightness differential (separation of luminosity), and returns a number for each measurement.

There are two propositions out there at the moment for what numbers constitute 'sufficient'. One set of acceptable numbers is proposed by Hewlett Packard. The other is a 'suggestion' within W3C draft document which is flagged with the comment 'Determine color visibility.@@needs work?'.

There's no stick in the ground, but here's what the proposed numbers are:

Comparison of Hewlett Packard and W3C contrast thresholds

HP W3C
Colour differential 400 500
Brightness Differential 125 125

Comments

  • The majority of government sites currently fail the W3C-suggested colour differential (500), yet they can still be accessed OK.

Do you have any evidence to support this? Rowan Smith 11:08, 17 August 2007 (NZST) Yep, I tested the top 6 sites cited by eGovWatch and only one of them passed the 500 mark. Rowan Smith 11:12, 17 August 2007 (NZST)

  • Agencies have branding standards and corporate palettes to work with; the W3C colour differential is a stringent requirement which limit the scope of agencies to meet those requirements.
  • Sites meeting the HP suggestion but failing the W3C suggestion have been tested for accessibility and generally don't pose foreground / background contrast issues.

Suggestion

I suggest that this statement be written into the standard:

  • Foreground and background colours should have a colour differential of 400 or more, and a brightness differential of 125 or more.
  • If the colour differential is greater than 400 but less than 500, it must be tested by users with colour-impaired vision.
  • If the colour differential is greater than 500, it does not need to be tested.

Anyone have any comments?

Rowan Smith 13:08, 14 August 2007 (NZST)



The AERT algorithm (above) has never been a WCAG recommendation, and it is known to favor hot/cold color combinations rather than effective contrasting combinations. I suggest looking to the luminosity contrast ratio algorithm which will form part of WCAG 2.0 recommendation. Terrence Wood 16:33, 14 November 2007 (NZDT)


What about providing alternate style sheets?

  • I agree we need to be more specific about the requirements in the standard. I do like your suggestion Rowan of clarifying the testing requirements.
  • An alternative could be that if agencies cannot meet the requirements with the colours as determined by their brand - they have to provide an alternative style sheet which could be high contrast, black and white, large text - etc
  • This article http://www.digital-web.com/articles/strategies_for_css_switching/ has a great commentary on how this could be achieved

[added by Nathan Wall 14:56, 14 September 2007 (NZST)]

Awesome find, Nathan - server-side style switcher. Thanks, I'm off to have a play :-) -- Rowan Smith 01:31, 10 October 2007 (NZDT)

NDA have updated their site

The link should now point to http://accessit.nda.ie/it-accessibility-guidelines/web/guidelines/priority-2/2-1

You might have to run a link checker over this whole site.

p.s. instructions for adding your sig should appear on the editing page, not the article page =)

--Terrence Wood 13:21, 5 December 2007 (NZDT)




WCAG2 version

just FYI -   In the latest drafts of WCAG 2.0, color contrast is a little bit more spelled out. Level AA Success Criteria 1.4.3 says:

1.4.3 Contrast (Minimum): Text (and images of text) have a contrast ratio of at least 5:1, except if the text is pure decoration. Larger-scale text or images of text can have a contrast ratio of 3:1. (Level AA)

If you’re more ambitious, Level AAA Success Criteria 1.4.5 says:

1.4.5 Contrast (Enhanced): Text (and images of text) have a contrast ratio of at least 7:1, except if the text is pure decoration. Larger-scale text or images of text can have a contrast ratio of 5:1. (Level AAA)

http://drinkingoatmealstout.com/2007/06/02/wcag-20-do-you-have-enough-color-contrast-on-your-web-site/

Anthony Hawkins 10:29, 24 June 2008 (NZST)