Articles by Zain Adeel
My struggle with colors, part IIZain discusses building an accessible color system from scratch. An accessible color system should follow WCAG guidelines, use a standardized tone generation method, and be scalable. He starts with a gray tone scale with 11 tones ensuring a contrast ratio of 4.5:1 or higher. Tones are named using a numerical scale from 0 to 100. Five hues are selected: red, yellow, green, blue and purple. The middle tone for each hue is determined to have sufficient contrast ratio. Tints and shades are used to generate tones for each hue. Colorable is used to manually find tones with the required contrast ratio. Guidelines are provided to scale the system by adding more tones or accent colors while maintaining the numeric naming scheme. Zain concludes that experimenting and practicing these techniques will help designers create relevant color systems for their needs.