NC State Colors and Accessible Combinations

In January, Jen declared 2016 to be the Year of Documentation for OIT Design. We’ve built a lot of themes and plugins, but we haven’t always done an effective job of documenting how they work or how other developers on campus might contribute to the projects.

Two-plus months later, we’re still compiling a lot of that information. Spoiler alert: https://design.oit.ncsu.edu/docs/ is going to be your go-to place for information about our projects. Bookmark that page!

But we’re also starting to pull together more general documentation about building websites at NC State. In particular, we’re documenting how OIT Design implements University Communication’s brand guidelines, and how we follow the recommendations of the OIT’s Accessibility Coordinator.

The goal is to create a set of design recommendations that will complement both the brand site and the accessibility site, synthesizing some important lessons we’ve learned along the way. If you’re an experienced developer who’s been working with the brand since it was released, much of this will be obvious. But if you’re just getting started, this will hopefully be a helpful resource.

I’d like to start with something pretty easy: color.

NC State Color Palette

NC State has a color palette consisting of three core colors, four accent grays, and six complementary “extended palette” colors. The brand site includes some guidelines on proper use:

  • “When Wolfpack Red is your dominant color — in print, online or on promotional items — your audience will know you speak for NC State.”
  • “In a two-color design, accent grays can be used with Wolfpack Red, White and Black.”
  • “If you use colors from the expanded palette, use those colors in the same amounts throughout your website or publication.”
  • “Varying secondary colors reduces their prominence and keeps them subordinate to Wolfpack Red, Black and White.”

They’re presented here, along with the SCSS markup you might use to implement them on your site:

See the Pen Color Palette by OIT Design (@oitdesign) on CodePen.0

:hover, :focus, :active Effects

If you’re designing buttons or some other user interface element that you want to change color for its :hover, :focus, and :active states, we recommend that you use a consistent color change of 10% darker. When you apply that 10% color change to Wolfpack Red—the color you’ll probably be using most frequently—you get Reynolds Red, keeping your visual effect within the campus color palette.

An example for :hover:

See the Pen Color Palette with :hover by OIT Design (@oitdesign) on CodePen.0

Accessible Combinations

The IT Accessibility Coordinator explains:

You need to ensure that your foreground and background colors have enough contrast so that users with visual disabilities can read your content. This is true for the main text of your document, menus and navigation, and any hover/focus effects you apply to elements.

Ensuring you have enough color contrast for all users is a complex subject when you try to consider all of the different types of visual disabilities. The W3C has defined a formula to determine if two colors have enough contrast to ensure that most people with visual disabilities will be able to access the content.

You can test the core and extended brand colors with an evaluation tool using the W3C formula. Note that whether a combination passes or fails depends in part on the font size being used. Generally speaking, larger font sizes buy you more color contrast options.

Although AA conformance is often sufficient, AAA conformance is more inclusive and still allows a fair amount of variation within the university brand colors. Whenever possible, we try to meet the AAA standard. (Notable exception: standard hyperlinks are Wolfpack Red at all font sizes.)

Below are the color combinations that meet the AAA standard:

See the Pen WCAG AAA Accessible Color Combinations by OIT Design (@oitdesign) on CodePen.0

Note that these are only the colors that meet accessibility guidelines. It remains up to individual designers to choose their colors for the appropriate aesthetic value.


 

So there you go. If you were bored by this post, it probably means you’re already using the brand colors correctly and in an accessible way. And that’s great! We’re going to be writing a bunch more of these over the rest of 2016, so there are plenty more boring blog posts to look forward to!

If you have any topics you’d like to see us cover, please email us at oitdesign@ncsu.edu.