× What’s Your Company’s Disability Readiness Score? Take the quiz!

    CAT Practice – Testing Contrast

    Before starting Color Contrast testing confirm your system is setup correctly.

    The following is dusty blue box with white text

    Colour Contrast Analyser CCA output:

    • Foreground: #FFFFFF
    • Background: #1E90FF
    • Contrast ratio: 3.2:1
    • 1.4.3 Contrast (Minimum) (AA)
      • Pass for large text only. Fail for regular text
    • 1.4.11 Non-text Contrast (AA)
      • Pass for UI components and graphical objects

    You can also use your browser’s code inspection tool to review the colors of the text directly. Look for the computed background-color of: `The following is dusty blue box with white text`

    If it’s anything other than rgb(30, 144, 255) then it’s not actually dusty blue, and you will need to adjust your system before preforming color contrast testing.

    1.4.3 Contrast (Minimum)

    Testing WCAG 1.4.3 Contrast Minimum is all about TEXT!!

    And Sizing!!

    1.4.11 Non-text Contrast, is everything else:

    Button 1 is non-actionable

    Just being used to show a common non-text element

    Button 2 has two states

    However it is not an overly smart button, after activating once it’s no longer actionable. To get back to the original button state, refresh the page.

    Color expressing meaning

    Bar chart with Wiggets blue #4472C4, Wurrlies rust #C55A11, and Snuggles green #548235 sales for 2018 – 2023 each with space around each bar to see the white background

    100% Stacked Columns showing sales years 2018-2023, Wiggets blue #4472C4, Wurrlies rust #C55A11, and Snuggles green #548235

    CCA color Picker might not get the exact colors, but these are what were using in XLS. Colors can be distorted when changed to images.

    • Wiggets blue= #4472C4
    • Wurrlies rust= #C55A11
    • Snuggles green= #548235
    Previous
    Next