Discuss

last person joined: 2 days ago 

Ask a question. Give advice. Share resources. Looking for software or hardware recommendations? Want to know how others are using text messaging in their work? Trying to find examples of IT policies? The NTEN Discuss forum is a great resource for all of the above and more! It's the general discussion list for the NTEN community, and folks all over the US (and the world) are sharing their questions, answers, and news about nonprofit technology.

Website Colors and Accessibility

  • 1.  Website Colors and Accessibility

    Posted 30 days ago
    The nonprofit I'm working with has hired a design firm to create a new website. My role is to be the liaison between the design firm and the nonprofit organization.

    The current website has significant issues with color and color contrast. I want to provide some input to help mitigate this issue for the new website.

    I'm wondering if anyone has any cost-effective suggestions on how I can guide the design team along and inform the nonprofit org that we need to make changes to the brand colors for the web to enhance accessibility?  The brand colors themselves do not past color contrast tests with white or black (https://webaim.org/resources/contrastchecker/). What options should be expected under these circumstances?  There's no extra budget to do a whole lot with outside consultants.

    The design team sent me a proposed color scheme for the new website - all of the colors failed the test above. Should they be building the color palette using a utility like https://toolness.github.io/accessible-color-matrix/?  Something else?

    Any suggestions or thoughts are welcome!




    ------------------------------
    Lynda Mitchell, MA, CAE
    Doylestown, PA
    ------------------------------
    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline


  • 2.  RE: Website Colors and Accessibility

    Posted 29 days ago
    I've found tota11y as a very helpful (free!) tool for website accessibility.  In addition to flagging when color contrast is insufficient, it gives recommendations for similar colors that meet the appropriate contrast threshold.  It also indicates how a screen reader will interpret the page and other accessibility factors that I hadn't been aware of before.

    Example of contrast ratio dialog below.
    tota11y reporting contrast violations and suggesting appropriate color combinations

    ------------------------------
    Lucinda Stroud
    Information Systems Analyst
    Seattle, WA
    ------------------------------

    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline


  • 3.  RE: Website Colors and Accessibility

    Posted 29 days ago
    Hi Lynda,

    There's a lot to unpack here. Short answer (and my opinion only) if Accessibility is a requirement, yes the designer should be using a tool to build the color palette.

    However, here's my $0.02 and the longer answer.

    First, was Accessibility a requirement listed in the RFP? Did it make into the contract? If so, then the design firm should be aware of this issue and reminded they need to comply. Ask them what tools they use to validate Accessibility. Regardless, accessibility has been a recent buzzword in the web design/development world and should be forefront in their minds. IMHO, the resources you listed are good for building a palette. 
    Next, you say the brand colors don't pass a contrast test. Changing the colors on a website is one thing. That decision is most likely something that has been designated to an individual or small group. Altering the brand colors is a much larger conversation in scale and the number of people involved. Also, if this a Chapter or Affiliate of a large nonprofit, changing the brand colors may not even be an option.

    Finally, Accessibility is an issue that encompasses much more than colors and contrast. A tool I use when validating sites I develop is a Chrome extension - ARC Toolkit. It runs tests that cover 6 different areas - media, structure, keyboard, ARIA, IDs, and color contrast. It not only shows errors and warnings, but also provides a recommended solution. (see the image below)





    ------------------------------
    Michael Gburski
    Jadefire Development

    mike@jadefiredev.com
    435.229.6423
    ------------------------------

    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline


  • 4.  RE: Website Colors and Accessibility

    Posted 29 days ago
    Edited by Lynda Mitchell 29 days ago
    Thanks Lucinda and Mike.

    To answer your question, Mike: I came onboard after the proposal was accepted and the RFP did not have any requirements for accessibility. I raised the issues after I came on board and now I'm trying to explore options to address the issue knowing that the cost for accessibility was not factored into expenses.

    I appreciate those two tools you referenced. I will check them out and discuss with the web design/development team.

    I wish I knew more about accessibility than I do! Do you or anyone else know whether something like Accessibe could help with making a website accessible if we aren't able to do a costly build?

    Thank you again!

    Lynda

    ------------------------------
    Lynda Mitchell, MA, CAE
    Founder/CEO
    Centrarse Digital
    Doylestown, PA
    ------------------------------

    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline


  • 5.  RE: Website Colors and Accessibility

    Posted 29 days ago
    Kudos for flagging very important website accessibility issues Lynda!

    There are many tools for automated accessibility checking. It's great to see the ecosystem growing in this regard. Automated testing will only ever get you so far, however, and should be combined with keyboard testing, and ideally testing with actual users.

    A flight manual in the hands of an inexperienced pilot may get you off the ground, but where you land may not be smooth.

    You may want to carve out part of the budget to work with a more qualified agency that can ensure accessibility and usability standards are met. If the current agency hasn't met color standards, it's unlikely they're going to understand the nuances of WCAG standards, know how to identify false positives in automated tests, or have a view on cognitive and mobility impairments.

    ------------------------------
    Andrew Mallis
    CEO & founder @ www.kalamuna.com
    Oakland, CA
    mallis@kalamuna.com
    925-255-5204 x700
    ------------------------------

    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline


  • 6.  RE: Website Colors and Accessibility

    Posted 29 days ago
    In this situation, its worth going back to the WCAG guidelines for contrast: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum

    Note that the main contrast requirement is, "The visual presentation of text and images of text has a contrast ratio of at least 4.5:1." Also note that there are exceptions for large text, incidental text or images, and logotype. Focusing on making sure there is sufficient contrast on the most important parts of your site - namely content, navigation, UI controls and calls to action - is where you want to spend your energy.

    If colors in your palette do not pass the contrast ratio test with a black (or white) font face, avoid them in the content design for instance. Push the design team to go with a simpler solution - black (or very dark grey) font-face on white for the content areas of your site. That along with other best practices for readability - minimum font-size of 18px for body text (there is no official minimum for WCAG), line-heights of at least 1.5em, keeping line measure below 700px, etc. will go a long way with making your site's most important asset (the content!) accessible and readable.

    Or for navigation, if none of your palette colors provides contrast with even a white or black font-face, see if another color can be adopted. Or seek out a solution with a dark color as the font-face against a white background, or even consider just using black (or very dark grey) on white if no other colors will work.

    Look for design opportunities in the header and footer where the team can bring in the problematic parts of the color palette that don't interfere with the accessibility of the site. These may present themselves in places like the branding, tag-line or background colors. Though, while there may be room to tone down the contrast for the exceptions in the guideline - large text, incidental text or images, and logotype - continue to advocate for keeping contrast as high as possible.

    For help with the palette, there are tools that can help you find complimentary colors based on what is already in the palette. For example: https://coolors.co/

    ------------------------------
    Mark Leta
    Functional Analyst
    Arlington, VA
    ------------------------------

    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline


  • 7.  RE: Website Colors and Accessibility

    Posted 29 days ago
    Hi Lynda, I'd say you're already on the right track! The key to giving productive input to outside hired designers is offering guidelines that are clear and outcomes that are both objective and quantifiable, which you already have. For example: "All logo and website copy colors must pass the accessibility tests on https://webaim.org/resources/contrastchecker" is a clear, easy to follow outcome and guideline for designers to stick to.

    See what else is important, and include that in your list of guidelines. Get your key stakeholders to agree on what exact, quantifiable outcomes the new website and logo need to meet, and provide those guidelines to your design firm. Better yet, add them to your brand guide if you have one.

    That kind of clear guidance is actually welcome to a professional, in contrast to the dreaded vague feedback designers are used to ... as depicted by this comical but poignant example - https://theoatmeal.com/comics/design_hell

    ------------------------------
    Darya Gorlova
    Director of Client Experience
    Oakland, CA
    ------------------------------

    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline


  • 8.  RE: Website Colors and Accessibility

    Posted 26 days ago
    Hi Lynda
    Hurray to you for flagging this important issue.

    In addition to the excellent comments below, may I also suggest some user-based testing. What can conform to standards may still not actually work well.

    I would suggest connecting with the relevant local charities in your area and find out if you can pay some clients an honorarium to beta test the site. Your local organization for people with vision loss would be one. I am unsure how deep you want to go in terms of other areas of accessibility.

    Thank you for your caring.
    Ann

    ------------------------------
    Ann Rosenfield
    Toronto, ON
    ------------------------------

    2020 Nonprofit Technology Conference Logo  w/ Baltimore Skyline