Webdev

Skip to Main Content

Colors on the web

There are a few changes to the standard color scheme to accomodate acessibility issues for the color blind and visually imparied.

Below are the colors and rules about combining them.

Main colors

 

WHITE
#fff
rgb(255,255,255)

 

BLACK
#333333
rgb(51,51,51)

 

LIGHT GRAY
#f1f1f1
rgb(241,241,241)

 

ROARANGE
#f47920
rgb(244,121,32)

 

LIGHT ROARANGE
#f69240
rgb(246,146,64)

 

LINKS
#b82b00
rgb(184,43,0)

 

BORDERS
#e6e7e8
rgb(241,241,241)


 

Accessibility and color combinations

In order to meet accessibility standards, color combinations must have a certain color contrast ratio.

Roarange and white do not mix

Roarange and light roarange cannot be used as a text color on a white background.

White text cannot be used on a background that is roarange or light roarange.

Text color must change based on background color

If you are using the 'Theme' option in a content type to change the background color, these changes will occur automatically.

On white background

#b82b00 Link
#962300 Link hover
#d4441c Button
#333333 Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Solid Button

 

On light gray background

#aa2e00 Link, button
#802200 Link hover
#333333 Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Solid Button

 

On black (#333333) background

#f47920 Link, button
#f69240 Link hover
#ffffff Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Solid Button