4 thoughts on “How to check for accessible colors — A11ycasts #17

  1. Vladimir Shafikov

    Great work, Rob! A11ycasts very concise, straight to the point and amazingly useful! 🙂 Keep them in the same flow!
    Suggestion: Maybe sometimes it can be useful to have code from your examples be available on github so people can play with the source code, e.g. from the episode about headings and landmarks. 🙂

  2. Vinay Chilukuri

    Good stuff, Rob.

    I ensure that the designers check color contrast diligently on various elements on the page before sending it to development. Sketch has a great plugin (https://github.com/getflourish/Sketch-Color-Contrast-Analyser) which you can use to check your contrast levels during the design.

    For tricky things like gradients, I use the Luminosity blending mode and see if the text and the background have enough contrast between them.

    Overall, checking color contrast is a fundamental hygiene check that a designer must do. Also makes us to be mindful that we are not designing for us but the users (who do not see colors on the page in the same that the we/designers do)

  3. Neil Osman

    text shadow? does it count? I think it should.

    Our work could have been so much essayer if devTools offered some assistance. for example when picking a color, devTools could suggest possible contrasted colors in accordance to user configured ratio (1:3, 1:4.5, 1:7);

  4. LuLeBe

    please share these details within Google. Many things (like the Google cloud console) have too much tiny light grey text on white background.

Leave a Reply