Why Your Mac Color Contrast Testing Might Be All Wrong

The scene: a Mac user is trying to test color contrast with a tool like The Paciello Group’s Colour Contrast Analyser. When they grab a color using the color picker, it doesn’t match the HTML/CSS define color being used. It is common for the Adobe Software users on Mac to change the display settings to more accurately represent the colors of printed material.

When testing Web Accessibility Standards, color should be set to match a visual display. To do this, we must make sure that the Mac Display Profile is set to sRGB IEC61966-2.1 which is an RGB color space created by HP and Microsoft to use on monitors, printers and the internet. This will ensure that the CCA will match the colors defined for a digital display.

MacOS Steps to change display color settings:

1. Go to Apple Menu > System Preferences

Screen shot of the Apple Menu > System Preferences

2. Activate Displays

Screen shot of System Preferences with the Displays icon highlighted

3. Activate Color tab within the Built-in Retina Display window

Screen shot of the Built-In Retina Display window with the Color button highlighted

4. Navigate to Display profile and select sRGB IEC61966-2.1

Screen shot of Built-In Retinal Display Window with Color highlighted and sRGB IEC61966-2.1 selected

Now retest to ensure that CCA’s color picker captures the coded color value.

Rodrigo Sanchez

Accessibility and UX Consultant | Montreal, Canada

Visit Profile

Full-Stack Designer focusing on Accessibility (a11y), UX, Design & Dev. Latinx / Cis M

One comment:

Patrick H. Lauke says:

July 27, 2020 at 9:09 am

I’d add here that this may well be a quirk/shortcoming of CCA – see https://github.com/ThePacielloGroup/CCAe/issues/76

Safest way, whenever possible, is not to use the picker, but to just grab the actual defined color values from the CSS instead (using Developer Tools etc).