5

Ask DN: Test colours and contrast on your design

5 years ago from , UX designer

Hi all!

Do you have any tips on how to easily test your design, colour and contrast, on your computer? Sometimes you only need a small tweak on that greyish color to make it more accessible for people with poor contrast displays or visually impaired. And this I would like to test in a easy way.

I've heard someone talking about switching to "Invert colours" and "Use greyscale" under "Accessibility" (I'm using OSX).

I've also used this tool before: http://snook.ca/technical/colour_contrast/colour.html

But are there any other useful hints that you use?

6 comments

  • Catalin CimpanuCatalin Cimpanu, 5 years ago

    Our dev department uses this Firefox add-on: https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/

    More details here: http://www.unimelb.edu.au/accessibility/training/examples/1-4-3-contrast/

    Hope this helps. Have a great one!

    1 point
  • Frédéric AudetFrédéric Audet, 5 years ago

    Colour Contrast Analyser by paciellogroup.com is a great tool for Mac OSX.

    0 points
  • Paul FarinoPaul Farino, 5 years ago

    For iOS and Android I use Skala Preview (http://bjango.com/mac/skalapreview/) - It's great to test out protanopia, deuteranopia, tritanopia, and monochrome for color blindness.

    0 points
  • Kira CampbellKira Campbell, 5 years ago

    This is my tool of choice: http://leaverou.github.io/contrast-ratio/. I also use Color Oracle on my mac to check for issues with color blindness.

    Sidenote, I have stopped using "grey-ish" colors below about 18px. I have never met a grey block of text that I didn't have to squint to read. If I have that much trouble in my late 20s, then I really feel bad for my 40-year-old counterparts. Take pity on the old guys (joke) and stick to #444.

    0 points
    • Klare FrankKlare Frank, 5 years ago

      Also my tool of choice. Makes it really easy to actually see the problems yourself.

      1 point
  • Tim GauthierTim Gauthier, 5 years ago

    what about design for people who can't have too much contrast? My little brother has Irlen Syndrome which causes problems for him if the contrast of text is too high. I personally use the tool from snook and am fairly conscious about colour choices for various uses. My link states/hover/active etc always use colour and shade variance for people to be able to see differences despite any other difficulties. I also try to make my contrast as middle, dark grey text on super light grey backgrounds etc. Then I try to compensate for really bad monitor calibrations. I try to test on android OLED vs iPhone, my mac, and a crappy monitor I keep around. Honestly the android tends to be the worst (S3).

    0 points