Skip to content
University of Georgia

This guide covers UGA-specific web accessibility standards, brand guidelines that support accessibility, and resources for creating accessible websites within UGA’s design system. It bridges WCAG 2.1 AA compliance with practical application in UGA’s WordPress/CMS environment. Use these standards and resources to create accessible web content that maintains UGA’s visual identity.

Why this matters

Consistency: Using UGA-approved templates and color combinations ensures that our websites look professional and are accessible across the institution.

Efficiency: Working with pre-approved accessible designs saves time. You don’t have to figure out accessibility on your own; it’s built in.

Brand integrity: UGA’s brand identity is strengthened when all our websites are consistently accessible and follow our standards.

Legal compliance: By following these standards, you ensure your websites meet WCAG 2.1 AA and ADA Title II requirements.

UGA brand and color accessibility

UGA’s visual identity is important, but it must also be accessible. The following guidelines help balance brand consistency with accessibility.

UGA red (primary color): Use UGA red (RGB: 206, 17, 38 / Hex: #CE1126) for headlines and important elements. This color has strong contrast against white and light backgrounds, making it accessible for text.

Supporting colors: UGA maintains a palette of supporting colors. All approved color combinations are tested for WCAG AA contrast compliance (4.5:1 for text, 3:1 for graphics).

Contrast requirements:

  • All text must have at least 4.5:1 contrast ratio against its background (WCAG AA standard).
  • Important graphics and UI elements must have at least 3:1 contrast ratio.
  • Don’t rely on color alone to convey information. Use text labels, icons, or patterns in addition to color.

Using color accessibly:

Approved accessible color combinations

Use these UGA-approved color combinations for web content. All have been tested for WCAG AA compliance.

Primary combinations (for body text and important content):

  • UGA red (RGB: 206, 17, 38) on white
  • Dark gray (RGB: 64, 64, 64) on white
  • White text on UGA red background
  • White text on dark gray background

Heading combinations:

  • UGA red for H1 and H2 headings on white
  • Dark gray for H3 and H4 headings on white
  • White headings on UGA red or dark gray backgrounds

Supporting colors (use these for emphasis, not for essential information):

  • See your UGA WordPress theme for available supporting colors and their accessible pairings.
  • When in doubt, test with a contrast checker or contact DASH.

Background colors:

  • White is preferred for body text backgrounds because it provides maximum contrast.
  • Light gray (RGB: 240, 240, 240) can be used as a background for secondary content. Test text color contrast carefully.
  • Avoid very light backgrounds (barely off-white) as they reduce contrast.

Learn more about color contrast testing and tools.

Back to top

Typography guidelines

Typography affects both readability and accessibility. Follow these guidelines when choosing fonts and sizing for UGA websites.

Font choices:

  • Recommended fonts: Use sans-serif fonts like Arial, Verdana, Helvetica, or modern web fonts (like Google Fonts’ Open Sans, Roboto, or Lato) for better screen readability.
  • Avoid: Avoid highly decorative, script, or serif fonts for body text. They are harder to read on screens, especially for people with low vision or dyslexia.
  • UGA standard: Your WordPress theme has a standard font. Use it for consistency unless you have approval to change it.

Font size:

  • Body text: Minimum 12px (14px or 16px is better for improved readability).
  • Headlines: At least 24px for H1; scale down proportionally for H2, H3, etc.
  • Small text: Avoid very small text (less than 11px) for important information.
  • Remember that users can zoom and enlarge text. Don’t set fixed font sizes that prevent this.

Line height and spacing:

  • Line height: Use at least 1.5 line height (line spacing) for body text to improve readability. Your theme likely handles this.
  • Letter spacing: Adequate letter spacing improves readability. Don’t compress text too tightly.
  • Paragraph spacing: Separate paragraphs with adequate space (not just line breaks) for visual clarity.

Text styling:

  • Bold and italics: Use these for emphasis, but sparingly. Excessive bold or italic makes text harder to read.
  • ALL CAPS: Avoid long passages in all caps. Mixed case is easier to read.
  • Justified text: Avoid justified text (aligned to both left and right margins). Left-aligned text is more accessible.
  • Centered text: Use centered text sparingly. It’s harder to read for many people.

Learn more about enlarged text and readability.

UGA templates and components

UGA provides accessible templates and components for websites. Using these built-in tools ensures your site meets accessibility standards.

Use approved templates:

  • Start with UGA’s official WordPress theme or page templates, not a blank page or custom design.
  • Approved templates have accessibility baked in: proper heading hierarchy, semantic HTML, color compliance, and responsive design.
  • If you modify a template, maintain its accessibility features. Don’t override heading styles or remove semantic elements.

Component accessibility:

  • Navigation: Use the theme’s main navigation menu. It’s keyboard accessible and has proper ARIA labels.
  • Buttons: Use the theme’s button styles. Don’t create custom buttons with images or non-semantic elements.
  • Forms: Use the theme’s form components. They include proper labels and accessibility features.
  • Images: Insert images through the media library and always add alt text. The theme provides an alt text field.
  • Cards and layouts: Use theme-provided card layouts and grid components. They maintain proper structure.

Customization guidelines:

  • If you customize colors or fonts, test contrast and readability. Refer to the approved accessible color combinations section.
  • If you add custom code or CSS, ensure it maintains semantic HTML and accessibility features.
  • Contact your web team or DASH before making extensive customizations.

WordPress and CMS accessibility

UGA uses WordPress for website management. Here’s how to use WordPress accessibly.

Page structure in WordPress:

  • Page title (H1): Every page has a title. This becomes the H1. Make it descriptive.
  • Headings: Use the built-in heading styles (Heading 2, Heading 3, etc.) in the WordPress editor. Don’t make text look like a heading by making it bold and large.
  • Never skip heading levels: Go H1, H2, H3. Don’t jump from H1 to H3.
  • Lists: Use the bullet list and numbered list buttons in the editor. Don’t type bullets manually.

Images in WordPress:

  • Upload images through the WordPress media library.
  • When inserting an image, fill in the “Alt text” field with a description of the image. This is required for accessibility.
  • For decorative images, mark the alt text field empty but don’t delete the field.
  • Learn more about image alt text.

Links in WordPress:

  • Make link text descriptive. Instead of “Click here,” use “Read the course accessibility policy.”
  • Use the link button in the editor to create links, not pasting raw URLs.
  • Learn more about accessible link design.

Forms and plugins:

  • Use form plugins that are tested for accessibility. Confirm with your web team which plugins to use.
  • When adding third-party tools or plugins, check their accessibility documentation.
  • Test any plugin you use with keyboard navigation and screen readers.

Accessibility checker:

  • WordPress has built-in accessibility checking features. Use them to identify issues before publishing.
  • Your theme may also have an accessibility checker. Run it on every page before publishing.

Mobile responsiveness:

  • Test your pages on mobile devices. All UGA themes are responsive, but content should look good on all screen sizes.
  • Ensure touch targets (buttons, links) are large enough on mobile (at least 48×48 pixels).

Learn more about web accessibility.

Back to top

Relationship to WCAG 2.1 AA

These UGA standards are built on top of WCAG 2.1 Level AA (Web Content Accessibility Guidelines). WCAG is the international standard for web accessibility.

What is WCAG? WCAG 2.1 AA is a set of guidelines for making web content accessible to people with disabilities. It has four key principles:

  • Perceivable: Information must be presented in ways users can perceive.
  • Operable: Users must be able to navigate and interact with content using keyboard and other input methods.
  • Understandable: Content must be clear and predictable.
  • Robust: Content must work across different devices and assistive technologies.

How UGA standards relate: UGA’s standards are a practical implementation of WCAG for UGA’s context. By following UGA standards, you’re meeting WCAG 2.1 AA requirements.

Why WCAG matters: WCAG compliance is required by ADA Title II. Following these standards ensures legal compliance and good accessibility practices.

Learn more about WCAG 2.1 AA.

Design resources and tools

Use these resources to help you create accessible UGA websites.

UGA resources:

  • UGA Brand Guide – Official UGA colors, fonts, and design standards (available through your department).
  • UGA WordPress theme documentation – Help with your specific theme features.
  • DASH guides – All the topic-specific guides on this site (headings, images, links, etc.).

Testing and validation tools:

External resources:

Learn more about available accessibility testing tools.

Common mistakes to avoid

  • Assuming brand compliance means accessibility compliance: A website can follow UGA brand guidelines perfectly and still be inaccessible. Brand and accessibility are complementary but separate concerns. Meet both standards.
  • Using UGA colors without checking contrast: While UGA brand colors are beautiful, some combinations don’t meet WCAG AA contrast requirements. When brand colors don’t work, add additional visual indicators (text labels, patterns, icons) to convey information accessibly.
  • Ignoring accessibility in custom templates: If you create custom templates or components outside the UGA CMS, they still must be accessible. Don’t assume custom work automatically meets WCAG AA. Test it thoroughly.
  • Using decorative fonts for body text: Ornamental or script fonts may look elegant but are often hard to read, especially for people with low vision or dyslexia. Save decorative fonts for headings only; use clear, readable sans-serif fonts for body text.
  • Forgetting about mobile accessibility: Accessibility requirements apply on all devices. Check your responsive design on actual mobile devices. Touch targets must be large enough, and content must reflow properly on small screens.
  • Treating accessibility as a one-time design decision: As your site evolves and new content is added, accessibility must continue to be checked. It’s not a box you check at launch; it’s an ongoing responsibility.

Back to top

Related DASH resources

Getting help

UGA’s Digital Accessibility Services Hub (DASH) is here to support you. Whether you need guidance on making your content accessible, help troubleshooting an issue, or training for your team, we are ready to help.

Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.

Back to top

Learn More About Digital Accessibility

Learn about the new federal rules regarding web accessibility from the U.S. Department of Justice and web content accessibility guidelines.

DOJ Web Accessibility Rule WCAG 2.1 Guidelines