Color Contrast of the Status text


  • Community Moderator

    In the list of applications you show at the end of each line a status text:

    • Unsafe (white font on light-red background)
    • Safe (white font on light-green background)

    At work I check if applications fulfill the ergonomic need according to WCAG and DIN-EN-ISO 9241.
    One aspect is the color-contrast-ratio (between background color and foreground color).
    The minimum color-contrast-ratio must be 4.5:1.

    Here is what I measure and also suggestions (in RGB values) for new color values that have a color-contrast-ratio of 4.5:1:

    • Unsafe (2.9:1, a better background color would be 190, 85, 84)
    • Safe (2.4:1, a better background color would be 60, 132, 85)

    Note:
    We use the "Colour Contrast Analyser" to measure the color contrast.
    It can be downloaded here: https://developer.paciellogroup.com/resources/contrastanalyser/


Log in to reply