I’m preparing to work on a new site design that I want to incorporate some accessibility into and in doing so, wanted to take a look at one of my favorite accessibility sites’ stylesheet—456 Berea Street. Roger, in my opinion is an accessibility guru and I learn a lot from him.

What I saw at the top of Roger’s stylesheet, for me anyway, was one of those things that make you smack your forehead and think, “Now why the hell didn’t I think of that?” After just having that moment I thought I’d share this epiphany with everyone else and officially state for the record, I’m using his idea from here on out. That said, and I’m sure I’m not alone in this, I don’t know how many times I’ve gone searching through a stylesheet to get the hexadecimal value of a color for a link or a heading or any other major color element in a site.

Below is what Roger has in place and to me it’s just ingenious really.

/*
Colours

Dark green headings (Main articles): 8A8E27
Light green headings (Home page sections): 828368
Green headings (Secondary): 578A1C
Green border colour: b6c8b0
Links: AE4F0C
Link hover: D03900
Heading link border: cfcfa0
Beige background colour: f1efe7
Light green background colour: f4f6e0

*/

Just for good measure, I’m smacking my forehead once more.