Typefaces & Colors
Typefaces:
|
PCC fonts for printed or published documents include Optima® (used in headings, logo etc.).
You can purchase Optima® from the Adobe Web site. Click here to purchase Optima® from Adobe.
The Pasadena City College web site will use a san serif font (Verdana, Arial, Helvetica, Georgia ) for body. These fonts are universal in almost all operating systems. If you do not have these typefaces, your machine will look at the nearest type family. A cascading style sheet (.css) for PCC default pages has been created. |
Colors:
Make sure your color choices have good value contract. Many visually impaired do not see all colors or see colors differently. For instance, red is often not easily recognized and our campus color is a deep red. We switched from using red in our background and link color to more visible colors like navy blue, black and dark green on a white background.
Don't use color as the only element to determine navigation or button choices. Make sure your link and visited link colors can be differentiated to a color impaired viewer. Make sure that you don't rely on color alone to indicate links. Some sites use the "decoration: none" style classification to remove the underline on links for a cleaner look- don't! The underline denoting links is important to inexperienced users and those with cognitive impairments.
(Checkpoint 2.2 [Priority 3] - [WCAG 1.0]) - Tests the color attributes of elements for visibility
Vischeck Software - checking how a website or images would look like to people with color-blindness.
| Where it's used: |
RGB Color Combination |
Hex Color Combo |
PCC Cardinal
Heading Level 3
Link hovers |
R:153 G:0 B:0 |
#990000 |
Gold
Nav Arrows
Active links
|
R:255 G:204 B:0 |
#FFCC00 |
| Department Banner |
R:255 G:255 B:255 |
#FFCC66 |
| Sub Title |
R:200 G:136 B:19 |
#C88813 |
| Department Title |
R:123 G:0 B:204 |
#7B0000 |
| Heading Level 1 |
R:78 G:122 B:204 |
#4E7ACC |
| Body Text |
R:0 G:0 B:0 |
#000000 |
| Navigation Head |
R:51 G:51 B:51 |
#333333 |
| |
R:55 G:55 B:55 |
#373737 |
| |
R:102 G:102 B:102 |
#666666 |
| |
R:153 G:153 B:153 |
#999999 |
| |
R:204 G:204 B:204 |
#CCCCCC |
| |
R:238 G:238 B:238 |
#EEEEEE |
| |
R:245 G:245 B:245 |
#F5F5F5 |
| Background |
R:253 G:253 B:253 |
#FDFDFD |
| |
R:255 G:255 B:255 |
#FFFFFF |
|
|
|
