Accessibility Considerations for Stacker News Media Kit & Brand Guidelines v1.2 - WIP

[jason-me]

Accessibility Considerations for Color Contrast Perceivability and Readability

Stacker.News Brand Guidelines should (wherever possible) be used to create accessible content that is both perceivable and readable for all users despite visual acuity or color perception. The easiest (and most established) way is to follow WCAG 2.2 Guidelines related to color contrast.

Alternately, there is a new methodology in draft status by the W3C which is in Beta called APCA (Accessible Perceptual Contrast Algorithm). This is being developed for use with future web standards for accessibility such as the WCAG 3 Guidelines which are currently in incomplete draft status with still some years until finalization. This is a useful alternate standard however and should be considered for increased readability above and beyond WCAG 2.

WCAG 2 Guidelines Related to Color and Contrast

1.4.1 Use of Color (Level A):
Color should not be the only means of conveying information.
WCAG 2.2 1.4.1 Use of Color

1.4.3 Contrast (Minimum) (Level AA):
Normal text must have at least a 4.5:1 contrast ratio, and large text at least 3:1.
WCAG 2.2 1.4.3 Contrast (Minimum)

1.4.11 Non-text Contrast (Level AA):
UI components, icons, and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.
WCAG 2.2 1.4.11 Non-text Contrast

Current Accessibility Issues

Some of the colors in the current color scheme present accessibility challenges, especially in light mode, where text and UI elements lack contrast, and where certain accent colors blend too closely with the background, making icons and focus indicators difficult to see. Additionally, some colors become difficult to see in both light and dark mode when threaded replies reach their max nesting (which results in a progressively lighter or darker background for each embedded reply).

These issues impact both text and non-text elements, and it's essential to address them to enhance the readability and usability of the UI across both light and dark themes. For the most part colors have been chosen wisely for their high contrast and readability, but the following design guidelines are intended to ensure that all colors meet the minimum legible threshold in their use.

Note: For our purpose of meeting WCAG 2.2 guidelines, "large text" means text that is at least 18pt or 14pt + Bold (font-weight: 700) and "small text" refers to anything less than that.

Brand Color Usage Table for Meeting WCAG 2.2

#	Name	HEX code	RGB code	HSL	Small Text Usage	Large Text Usage	Icon & Focus Usage
	Bitcoin-only	#F6911D	rgb(246,145,29)	hsl(32,92.3%,53.9%)	Dark: ✔️ OK Light: ❌ Not OK (use as accent only)	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK
	Blackr	#000000	rgb(0,0,0)	hsl(0,0%,0%)	Dark: ❌ Not OK Light: ✔️ OK	Dark: ❌ Not OK Light: ✔️ OK	Dark: ❌ Not OK Light: ✔️ OK
	Dark	#121214	rgb(18,18,20)	hsl(240,5.3%,7.5%)	Dark: ❌ Not OK (identical to base) Light: ✔️ OK	Dark: ❌ Not OK Light: ✔️ OK	Dark: ❌ Not OK Light: ✔️ OK
	Gold	#FADA5E	rgb(250,218,94)	hsl(48,94%,67.5%)	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK
	Gray	#969696	rgb(150,150,150)	hsl(0,0%,58.8%)	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK
	Light	#F0F0F0	rgb(240,240,240)	hsl(0,0%,94.1%)	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK
	Nostrch	#8C25F4	rgb(140,37,244)	hsl(270,90.4%,55.1%)	Dark: ❌ Not OK (only meets large text at ~3.4:1) Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK	Dark: ❌ Border recommended Light: ✔️ OK
	Pinkish	#E685B5	rgb(230,133,181)	hsl(330,66%,71.2%)	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ❌ Not OK
	Ruby	#C03221	rgb(192,50,33)	hsl(6,70.7%,44.1%)	Dark: ❌ Not OK (use for large text only) Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK	Dark: ❌ Border recommended Light: ✔️ OK
	Sky Hover	#007CBE	rgb(0,124,190)	hsl(201,100%,37.3%)	Dark: ❌ Not OK Light: ❌ Not OK (use for large text)	Dark: ✔️ OK Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK (use with caution)
	Sky Links	#2E99D1	rgb(46,153,209)	hsl(201,63.9%,50%)	Dark: ✔️ OK Light: ❌ Not OK	Dark: ✔️ OK Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK
	Sky Visited	#56798E	rgb(86,121,142)	hsl(203,24.6%,44.7%)	Dark: ❌ Not OK Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK
	So Fiat	#5C8001	rgb(92,128,1)	hsl(77,98.4%,25.3%)	Dark: ❌ Not OK Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK	Dark: ✔️ OK Light: ✔️ OK

Dark refers to dark mode baseline (#121214) & Light refers to light mode baseline (#FCFCFF)

(TODO) Brand Color Usage Table for Meeting WCAG 3 and APCA Guidelines

Tools and Resources

• APCA Contrast Calculator - Tool for evaluating color contrast to meet APCA guidelines
• Tailwind Figma Plugin - Plugin for Figma that can show either WCAG2 or APCA
• TPGi Colour Contrast Analyzer - Desktop tool for evaluating WCAG 2 contrast