User:Cmglee
2026: Expand section
| ← Previous revision | Revision as of 11:37, 23 April 2026 | ||
| Line 8: | Line 8: | ||
==2026== |
==2026== |
||
===[[:File:WCAG_contrast_ratio_4.5.svg|WCAG contrast ratio 4.5.svg]] [[File_talk:WCAG_contrast_ratio_4.5.svg|☎]] 23 April 2026=== |
===[[:File:WCAG_contrast_ratio_4.5.svg|WCAG contrast ratio 4.5.svg]] [[File_talk:WCAG_contrast_ratio_4.5.svg|☎]] 23 April 2026=== |
||
I had [[:commons:File_talk:Template_map_of_US_states_and_District_of_Columbia.svg#Contrast_checkers_and_contrast_ratios|a good discussion]] with {{user|Timeshifter}} about making diagrams accessible |
I had [[:commons:File_talk:Template_map_of_US_states_and_District_of_Columbia.svg#Contrast_checkers_and_contrast_ratios|a good discussion]] with {{user|Timeshifter}} about making diagrams accessible to the WCAG contrast ratio guidelines. As they used an [http://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=XXXXXX interactive tool] which necessitates trying out different combinations until requirements are met, I thought I could do better by plotting three-dimensional graphs of RGB values with the 3:1, 4.5:1 and 7:1 thresholds against black and white separately, as these are most relevant for text overlays: |
||
[[File:WCAG_contrast_ratio_thresholds.svg|thumb|512px|none|Plots of the three {{w|WCAG}} contrast-ratio thresholds 3:1 (solid curves), 4.5:1 (dashed) and 7:1 (dotted) between black (left figure) or white (right), and the {{w|RGB}} components of an {{w|sRGB}} colour, such as the colour denoted by the spot]] |
[[File:WCAG_contrast_ratio_thresholds.svg|thumb|512px|none|Plots of the three {{w|WCAG}} contrast-ratio thresholds 3:1 (solid curves), 4.5:1 (dashed) and 7:1 (dotted) between black (left figure) or white (right), and the {{w|RGB}} components of an {{w|sRGB}} colour, such as the colour denoted by the spot]] |
||
Curiously, a small range of values exceeds 4.5:1 against both black and white. For my future diagrams, I could just pick colours in that range. I thus created this plot: |
|||
[[File:WCAG_contrast_ratio_4.5.svg|thumb|Plot of hexadecimal red, green and blue components of colours exceeding the WCAG contrast ratio of 4.5:1 against both black and white – dots are multiples of 5 and 25]] |
[[File:WCAG_contrast_ratio_4.5.svg|thumb|Plot of hexadecimal red, green and blue components of colours exceeding the WCAG contrast ratio of 4.5:1 against both black and white – amber dots are multiples of 5 and 25]] |
||
Each arc-like band is a |
Each arc-like band is a cross-section of the 3D volume at selected blue values, outlined alternating between solid and dotted for clarity. |
||
| ⚫ | |||
The gridline intersections give values that can be shortcut to three hexadecimal digits e.g. #c39 (i.e. #cc3399, the only web-safe colour). Where more than one valid blue value is at an intersection, I've vertically stacked their swatches for visibility. |
|||
| ⚫ | |||
| ⚫ | |||
Using the diagram, I've identified six 3-hex-digit colours for general use: |
|||
| ⚫ | |||
# |
:{{legend|#776| #776 Grey }} |
||
# |
:{{legend|#46f| #46f Blue }} |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
===[[:File:hoberman_sphere.gif|Hoberman sphere.gif]] [[File_talk:hoberman_sphere.gif|☎]] 31 March 2026=== |
===[[:File:hoberman_sphere.gif|Hoberman sphere.gif]] [[File_talk:hoberman_sphere.gif|☎]] 31 March 2026=== |
||
