Accessibility documentation - Colour Contrast

[jonnymuir]

Draft some documentation for the Umbraco docs, detailing out how to be mindful of colour contract best practices.

[jonnymuir]

I am going to look at this, but I am starting from a pretty basic understanding of what is required for the Umbraco docs, therefore I've created this as an issue (so I create some comments), I think the tasks are:

• Find out what is already included in the docs: https://github.com/umbraco/UmbracoDocs
• Understand what are the guidelines for contributing to the docs: https://docs.umbraco.com/welcome/contribute/getting-started
• From a guild point of view, understand where we take our lead for best practises (possibly links nicely with the other item on this board - create accessibility guild mission statements)
• Create the draft document

[jonnymuir]

In addition to following the guidelines, style guides, vale linter as above I suggest we have standard for our accessibility documentation pages to encourage consistency and familiarity. Below I've done a starter for 10, open to opinions and views...

# The main title goes here

Example - Color Contrast. Note - use the American spelling of color for consistency. 

## Overview

Introduce the concept and its importance to accessibility. Include the reason why it is important both the "essential for some" and the "useful for all" parts of accessibility

Example:

An adequate color contrast is crucial for users with visual impairments to understand your content. It also enhances the overall usability of your design by improving legibility for everyone.

## Success criteria

Clearly state the relevant WCAG criteria with links to:
The Web Content Accessibility Guidelines (WCAG) 2.2 
The relevant WCAG 2.2 Understanding Docs


Example:

[WCAG 2.2 Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum)
[Understanding Contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)

## Implementation in Umbraco

Show how to use in a standard out of the box Umbraco install including screen shots.

Include any best practise (for instance using CSS variables), pitfalls, tips etc.

Example

Install Umbraco latest and TheStarterKit

    dotnet new umbraco --name ContrastExample
    cd ContastExample
    dotnet add package Umbraco.TheStarterKit
    dotnet run


## Testing

Show how to test for this success criteria for instance with WAVE.

Example - TODO

## Reporting using the Umbraco accessibility reporter

Show how the standard is reported using https://github.com/mattbegent/umbraco-accessibility-reporter

Example - TODO