Typography
Last Updated: 04 March 2025
At Your Space, we are committed to ensuring that our website and all digital content are accessible to as many people as possible. This document outlines the font colors and styles that we recommend using to meet accessibility standards and ensure readability for all users, in line with our Equality and Accessibility Policy.
### 1. Font Colors for Different Backgrounds
For our website, we use three primary background colors: white, orange, and black. The following recommendations ensure high contrast between text and background, which is essential for accessibility, especially for users with visual impairments.
#### a. White Background:
- **Text Color**:
- **Black (#000000)**: This offers the highest contrast and is ideal for readability.
- **Dark Grey (#333333)**: A softer option while maintaining excellent contrast.
- **Link Color**:
- **Blue (#1E90FF)**: A medium to dark blue provides strong contrast and is familiar to users as a hyperlink.
#### b. Orange Background:
- **Text Color**:
- **White (#FFFFFF)**: Provides high contrast against orange and ensures readability.
- **Dark Grey (#333333)**: Works well with medium and darker shades of orange.
- **Black (#000000)**: Suitable for dark orange backgrounds but less readable than white or grey.
- **Link Color**:
- **White (#FFFFFF)**: A good choice for links to stand out on an orange background.
- **Blue (#1E90FF)**: Offers a good contrast and works well for hyperlinks.
#### c. Black Background:
- **Text Color**:
- **White (#FFFFFF)**: Offers excellent contrast and readability.
- **Light Grey (#D3D3D3)**: A softer, more comfortable text color while still being highly readable.
- **Link Color**:
- **Light Blue (#ADD8E6)**: A light blue stands out clearly against black and is widely used for links.
- **White (#FFFFFF)**: White links are a consistent and readable option against a black background.
### 2. Accessibility Guidelines for Text Contrast
To meet the **Web Content Accessibility Guidelines (WCAG) 2.1**, it is important to ensure the following contrast ratios:
- **For Body Text**: The contrast ratio between text and its background should be at least **4.5:1** for normal text and **3:1** for large text (18px or 14px bold).
- **For Links and Buttons**: The contrast ratio should be at least **4.5:1** against the background for all interactive elements such as links and buttons.
Use tools like the **WebAIM Contrast Checker** to ensure the contrast ratios are met.
### 3. Font Styles
In addition to color contrast, font style plays a significant role in accessibility. Here are some general guidelines for font styles:
- **Font Type**: Use sans-serif fonts such as Arial, Helvetica, or Open Sans for improved readability, as they are easier to read on screens.
- **Font Size**:
- For body text, use at least **16px** to ensure legibility.
- For headings, use larger sizes, such as **24px** for main headings (H1) and **18px** for subheadings (H2 and H3).
- **Line Spacing**: Ensure that the line height is at least **1.5 times** the font size for body text. This improves readability and makes text less dense.
- **Font Weight**: Use **regular** or **medium** weights for body text. Avoid using overly bold text in large paragraphs, as it can reduce readability. Bold text is best used for headings or emphasis.
- **Text Alignment**: Align text to the left (left-aligned text) for readability, as this is the most accessible format for most users.
- **Avoid Underlining Text**: Do not underline text unless it is a hyperlink. Underlined text can confuse users with visual impairments, who might mistake it for a link.
By using these colour and font style guidelines, we ensure that our website meets accessibility standards and provides a clear and readable experience for all users, including those with visual impairments.