Accessible Colour Palettes

[tkshill]

Context for documentation change

It would greatly help to have a defined colour palette for the project that conforms to accepted web accessibility standards. Specifically, we're creating a palette that works well for people with Low Vision and Colour blindness

Proposed solution

• Fork and clone the repo. Follow the instructions in the README and Contributing guide to get it working on your machine.
• In the /src/ directory of the project, create a file called Styles.elm.
• Import the elm-ui base module by saying import Element below the module definition.
• Now, we're going to define 5 colours as defined by the elm-ui library.
  These five colours are defined by Paul Tol's research into high contrast colour schemes.
• The colours are:
  • "black" (rgb 0 0 0) #000000
  • "blue" (rgb 0 68 136) #004488
  • "red" (rgb 187 85 102) #BB5566
  • "yellow" (rgb 221 170 51) #DDAA33
  • "white" (rgb 255 255 255) #FFFFFF
• use the elm-ui rgb255 function to create constants representing the five colours
  e.g

black : Color
black = 
    Element.rgb2555 0 0 0

• add the colours to the list of objects the style module exports
• add a comment block in Style.elm that reminds developers that
  • all text should be either black or white
  • black text should be used with red and yellow backgrounds
  • white text should be used with blue backgrounds

(optional)

• If possible, replace all instances of direct use of the rgb255 function in the Shared.elm file with the appropriate colour from Style.elm

Resources that can help

Web Accessibility
If you have any questions or would like to tackle the issue/pair to solve this issue, please let us know in the comments.

Collaborators

styled after article written by Andy Cochran

[A-Scratchy]

Hi, I am happy to have a go at this :-)

[tkshill]

Awesome! It's all yours! Let me know if you need any help with it!