Brand Color Contrast Guidelines
Guidance on using UWF primary, secondary and tertiary brand colors to comply with sufficient color contrast for accessibility.
Consistent color use is vital for strong brand recognition. The UWF color palette has four layers: the primary palette, secondary palette, tertiary palette and the accent palette. UWF is differentiated by its palette of blues and greens. When working with our institutional colors, always use the color values to ensure uniformity. Visit the Colors page for more information about UWF colors.
Accessibility
Visit Section 508's Making Color Usage Accessible webpage and WebAIM's Contrast and Color Accessibility webpage for more information and guidance on how to use colors accessibly.
Color Contrast
One of the most common accessibility challenges is ensuring that text stands out clearly against its background. If the contrast between text and its background is too low, meaning the colors or brightness are too similar, it can make reading difficult for many people, especially those with visual impairments like color blindness or low vision. This lack of sufficient color contrast can make content hard to access or perceive.
Contrast is the difference in the brightness (or "luminance") between two colors. It is measured in a ratio, ranging from 1:1 (e.g., white text on a white background, which is impossible to read) to 21:1 (e.g., black text on a white background, which is highly readable).
The Web Content Accessibility Guidelines (WCAG) set standards for color contrast to ensure that content is legible to as many people as possible. WCAG 2.1 Level AA is the accessibility standard for UWF web content.
WCAG 2.1 Level AA Contrast Ratio Requirements:
- Contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as either 14 point (18.67 pixels, typically rounded to 19 pixels) and bold or larger, or 18 point (24 pixels) or larger.
- Contrast ratio of at least 3:1 for graphical objects (e.g., icons, chart elements, other meaningful non-text visuals) and user interface components (e.g., form input borders, buttons).
Tools like WebAIM’s Contrast Checker can test if colors in web content meet WCAG guidelines. WebAIM’s Contrast Checker includes a eye dropper tool to help extract the exact color value from any element on screen. Visit Section 508's How to Use the WebAIM Contrast Checker webpage for helpful guidance.
Using Color to Convey Information
Color should never be the only way to convey information, indicate an action, or distinguish a visual element. If information is communicated using color alone, some users may not be able to perceive or identify it.
For example, if overdue books are shown only in red text in a table, users who cannot distinguish that color may miss which items are overdue. Instead, use an additional indicator alongside color, such as text labels (e.g., "Overdue"), icons, or other visual indicators like symbols, to ensure the information is accessible.
Contrast Ratios for UWF Colors
The following tables showcase UWF primary, secondary and tertiary brand color combinations that pass a contrast ratio of 4.5:1 or higher and a contrast ratio between 3:1 and 4.49:1.
The foreground color with the contrast ratio for a respective background color in the below tables is hyperlinked to WebAIM’s Contrast Checker with the respective background and foreground colors set.
Contrast Ratios - 4.5:1 and Higher
| Background Color | Foreground Color - Ratio | Visual Example | Bold Visual Example |
|---|---|---|---|
| White (#FFFFFF) | Black (#000000) - 21:1 | University of West Florida | University of West Florida |
| Argo Navy (#00205B) - 15.46:1 | University of West Florida | University of West Florida | |
| Pine (#215732) - 8.48:1 | University of West Florida | University of West Florida | |
| Heritage Blue (#005EA6) - 6.66:1 | University of West Florida | University of West Florida | |
| Cannon Green (#007A33) - 5.48:1 | University of West Florida | University of West Florida | |
| Black (#000000) | White (#FFFFFF) - 21:1 | University of West Florida | University of West Florida |
| Luna Blue (#8DC8E8) - 11.55:1 | University of West Florida | University of West Florida | |
| Spring Green (#97D200) - 11.53:1 | University of West Florida | University of West Florida | |
| President’s Silver (#B2B4B2) - 10.06:1 | University of West Florida | University of West Florida | |
| Nautilus Blue (#009CDE) - 6.81:1 | University of West Florida | University of West Florida | |
| Heritage Gold (#A39161) - 6.78:1 | University of West Florida | University of West Florida | |
| Argo Green (#00A346) - 6.32:1 | University of West Florida | University of West Florida | |
| Argo Navy (#00205B) | White (#FFFFFF) - 15.46:1 | University of West Florida | University of West Florida |
| Luna Blue (#8DC8E8) - 8.51:1 | University of West Florida | University of West Florida | |
| Spring Green (#97D200) - 8.49:1 | University of West Florida | University of West Florida | |
| President’s Silver (#B2B4B2) - 7.41:1 | University of West Florida | University of West Florida | |
| Nautilus Blue (#009CDE) - 5.01:1 | University of West Florida | University of West Florida | |
| Heritage Gold (#A39161) - 4.99:1 | University of West Florida | University of West Florida | |
| Argo Green (#00A346) - 4.66:1 | University of West Florida | University of West Florida | |
| Argo Green (#00A346) | Black (#000000) - 6.32:1 | University of West Florida | University of West Florida |
| Argo Navy (#00205B) - 4.66:1 | University of West Florida | University of West Florida | |
| Heritage Blue (#005EA6) | White (#FFFFFF) - 6.66:1 | University of West Florida | University of West Florida |
| Cannon Green (#007A33) | White (#FFFFFF) - 5.48:1 | University of West Florida | University of West Florida |
| Luna Blue (#8DC8E8) | Black (#000000) - 11.55:1 | University of West Florida | University of West Florida |
| Argo Navy (#00205B) - 8.51:1 | University of West Florida | University of West Florida | |
| Pine (#215732) - 4.67:1 | University of West Florida | University of West Florida | |
| Nautilus Blue (#009CDE) | Black (#000000) - 6.81:1 | University of West Florida | University of West Florida |
| Argo Navy (#00205B) - 5.01:1 | University of West Florida | University of West Florida | |
| Pine (#215732) | White (#FFFFFF) - 8.48:1 | University of West Florida | University of West Florida |
| Luna Blue (#8DC8E8) - 4.67:1 | University of West Florida | University of West Florida | |
| Spring Green (#97D200) - 4.66:1 | University of West Florida | University of West Florida | |
| Spring Green (#97D200) | Black (#000000) - 11.53:1 | University of West Florida | University of West Florida |
| Argo Navy (#00205B) - 8.49:1 | University of West Florida | University of West Florida | |
| Pine (#215732) - 4.66:1 | University of West Florida | University of West Florida | |
| Heritage Gold (#A39161) | Black (#000000) - 6.78:1 | University of West Florida | University of West Florida |
| Argo Navy (#00205B) - 4.99:1 | University of West Florida | University of West Florida | |
| President’s Silver (#B2B4B2) | Black (#000000) - 10.06:1 | University of West Florida | University of West Florida |
| Argo Navy (#00205B) - 7.41:1 | University of West Florida | University of West Florida |
Contrast Ratios - Between 3:1 and 4.49:1
The following color combinations may only be used as large text (see definition below) or for graphical objects (e.g., icons, chart elements, other meaningful non-text visuals) and user interface components (e.g., form input borders, buttons).
Large text is defined as either 14 point (18.67 pixels, typically rounded to 19 pixels) and bold or larger, or 18 point (24 pixels) or larger. If the text size does not meet either of these specifications, these following color combinations are not permitted for use.
Recommendation: While the following color combination ratios between 3:1 and 4.49 meet color contrast accessibility requirements for UWF if used properly (see above), they should be used sparingly and only by those with high levels of accessibility management experience in design and web. The ideal usage of color combinations will be those with ratios of 4.5:1 and higher (see first table above) for more accessible usage of colors.
| Background Color | Foreground Color - Ratio | Visual Example (24px Font Size) | Bold Visual Example (19px Font Size) |
|---|---|---|---|
| White (#FFFFFF) | Argo Green (#00A346) - 3.31:1 | University of West Florida | University of West Florida |
| Heritage Gold (#A39161) - 3.09:1 | University of West Florida | University of West Florida | |
| Nautilus Blue (#009CDE) - 3.08:1 | University of West Florida | University of West Florida | |
| Black (#000000) | Cannon Green (#007A33) - 3.83:1 | University of West Florida | University of West Florida |
| Heritage Blue (#005EA6) - 3.15:1 | University of West Florida | University of West Florida | |
| Argo Green (#00A346) | White (#FFFFFF) - 3.31:1 | University of West Florida | University of West Florida |
| Heritage Blue (#005EA6) | Luna Blue (#8DC8E8) - 3.66:1 | University of West Florida | University of West Florida |
| Spring Green (#97D200) - 3.65:1 | University of West Florida | University of West Florida | |
| Black (#000000) - 3.15:1 | University of West Florida | University of West Florida | |
| Cannon Green (#007A33) | Black (#000000) - 3.83:1 | University of West Florida | University of West Florida |
| Luna Blue (#8DC8E8) - 3.01:1 | University of West Florida | University of West Florida | |
| Spring Green (#97D200) - 3.01:1 | University of West Florida | University of West Florida | |
| Luna Blue (#8DC8E8) | Heritage Blue (#005EA6) - 3.66:1 | University of West Florida | University of West Florida |
| Cannon Green (#007A33) - 3.01:1 | University of West Florida | University of West Florida | |
| Nautilus Blue (#009CDE) | White (#FFFFFF) - 3.08:1 | University of West Florida | University of West Florida |
| Spring Green (#97D200) | Heritage Blue (#005EA6) - 3.65:1 | University of West Florida | University of West Florida |
| Cannon Green (#007A33) - 3.01:1 | University of West Florida | University of West Florida | |
| Heritage Gold (#A39161) | White (#FFFFFF) - 3.09:1 | University of West Florida | University of West Florida |
| President’s Silver (#B2B4B2) | Pine (#215732) - 4.06:1 | University of West Florida | University of West Florida |
| Heritage Blue (#005EA6) - 3.19:1 | University of West Florida | University of West Florida |