Wikipedia:Manual of Style/Accessibility/Colors

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search

This table of colours are WCAG AAA compatible for 14 different hues – the 12 colours at 30° intervals, plus grey and brown. In each row, the "base colour" is the simplest representation of the hue. This will help editors to select accessible backgrounds that match a wide range of colour schemes.

The "darkest AAA background for black text" column is the darkest shade of that hue which meets the full WCAG AAA standard for (i) Brightness Difference, (ii) Colour Difference, (iii) Contrast Ratio, as measured by Snook's Colour Contrast Check when used with black text. Any lighter shade of that hue (i.e. larger hexadecimal numbers in the #RRGGBB representation) will exceed AAA standards.

The same applies to the "darkest AAA background for unvisited links" column when used with the default linked text for Vector skin (#0645AD), although the "darkest AAA background for unvisited links" column also needs to be consulted because the default colour for visited linked text using Vector skin is #0B0080.

If a dark background is desired, then it should ideally be presented against white text. The column "lightest AAA background for white text" shows the lightest that the background can be for each hue to maintain AAA compliance against white text. Any darker shade of that hue (i.e. smaller hexadecimal numbers in the #RRGGBB representation) will exceed AAA standards. Links are not suited to be used with their default colours on a dark background.

WCAG AAA compatible background colours against black text, white text, unvisited links (#0645AD), and visited links (#0B0080)
base colour name base colour base colour in hex base colour hue darkest AAA background for black text lightest AAA background for white text darkest AAA background for unvisited links (#0645AD) darkest AAA background for visited links (#0B0080)
red #FF0000
#FF7B7B
#B60000
#FFE2E2
#FF8A8A
orange #FF8000 30°
#FFA74F
#8C4600
#FFE4C8
#FF9021
yellow #FFFF00 60°
#FAFA00
#5C5C00
#F1F100
#B2B200
chartreuse #80FF00 90°
#A8FF4F
#326500
#AAFF75
#62C300
green #00FF00 120°
#7BFF7B
#006800
#99FF99
#00C800
spring green #00FF80 150°
#4FFFA8
#006733
#87FFC3
#00C663
cyan #00FFFF 180°
#00FAFA
#006363
#53FFFF
#00C0C0
dodger blue #0080FF 210°
#4FA8FF
#0057AF
#D6EBFF
#62B1FF
blue #0000FF 240°
#8888FF
#3030FF
#E6E6FF
#A3A3FF
electric indigo #8000FF 270°
#BB76FF
#7600ED
#F1E3FF
#CA95FF
magenta #FF00FF 300°
#FF29FF
#9F009F
#FFDEFF
#FE76FE
deep pink #FF0080 330°
#FF52A9
#B00058
#FFE0F0
#FF83C1
grey #808080 -
#A7A7A7
#595959
#E8E8E8
#ACACAC
brown #964B00 -
#E97500
#8D4500
#FFE4C9
#FF9021