Digital Brand Guidelines and WCAG 2.2 Accessibility

Introduction

For many customers, the first contact with a brand is now digital. They see a social media post, search for a product, visit a website or receive an email long before they hold a pack or meet a salesperson. In Sri Lanka, DataReportal’s Digital 2025 report counted 12.4 million internet users and 8.2 million active social media user identities in January 2025. In the UAE, internet use is close to universal. Digital channels are where many brand impressions are formed.

Yet many brand guidelines were written for print. They specify Pantone colours and paper sizes but say little about buttons, image ratios, social media formats or accessibility. As a result, websites and social feeds often drift away from the brand, with different agencies and freelancers making their own choices.

Digital brand rules close this gap. This article explains what digital guidelines should include, why accessibility is now an essential part of brand design, and how Dsigngo Group builds digital standards that keep a brand consistent across every screen.

Why digital needs its own rules

Digital channels differ from print in important ways:

Screens vary: colours and sizes look different on phones, laptops and televisions.
Layouts are flexible: websites rearrange content for different screen sizes.
Content changes constantly: social media and websites are updated daily, often by several people.
Interaction matters: buttons, links, forms and animations must be clear and easy to use.
Formats are set by platforms: each social media platform has its own sizes and features.
Accessibility is measurable: contrast, text size and navigation can be tested against standards.

Guidelines written only for print cannot answer these questions.

Digital colour

Screen colour values

Digital guidelines should specify RGB and HEX values for each brand colour. These values should be chosen carefully, as a direct conversion from print values may look dull or oversaturated on screen.

Colour roles

Websites use colours for different purposes: backgrounds, text, links, buttons, alerts and charts. Guidelines should assign roles to each colour, for example:

Primary button colour.
Link colour.
Success, warning and error colours.
Background and surface colours.
Chart colours for data visualisation.

Dark mode

Many users now use dark mode on their devices. Brands should consider how their colours and logo appear on dark backgrounds, and specify dark mode colours if their website or app supports it.

Accessible design

What accessibility means

Accessible design ensures that people with disabilities can use digital products. This includes people with low vision, colour vision deficiencies, hearing loss, motor impairments and cognitive differences. It also helps older users and anyone using a phone in bright sunlight or on a slow connection.

WCAG 2.2

The Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), are the international standard for digital accessibility. WCAG 2.2, published in October 2023, is the current version. It is organised around four principles: content must be perceivable, operable, understandable and robust.

For brand design, the most relevant requirements include:

Text contrast: at Level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text (around 24 px regular or 18.66 px bold) needs at least 3:1.
Non-text contrast: user interface components, such as button borders and form fields, and meaningful graphics need at least 3:1 contrast.
Use of colour: colour must not be the only way information is conveyed. For example, error messages need text or icons, not only red colour.
Text resizing: text should remain readable when enlarged.
Focus visibility: keyboard users must be able to see which element is selected.
Target size: WCAG 2.2 adds a minimum target size for interactive elements at Level AA, generally 24 by 24 CSS pixels, with some exceptions.

Brand colours and contrast

Brand colours are not exempt from contrast requirements when they are used for text or interface elements. Logos and brand names in logos are exempt. If a brand’s signature colour does not pass contrast tests, the guidelines can:

Use the brand colour for large headings or decorative elements, where lower contrast is allowed or not required.
Provide a darker or lighter accessible version for text and buttons.
Pair the brand colour with text colours that pass.

The guidelines should include a table of approved colour combinations with their contrast ratios.

Legal context

Accessibility is increasingly a legal requirement. In the European Union, the European Accessibility Act has applied since 28 June 2025 to many products and services, including e-commerce and some digital services, with the harmonised standard EN 301 549 referencing WCAG as the technical baseline. Businesses in Sri Lanka or the UAE that sell to EU consumers online may need to consider these rules. Even where accessibility is not legally required, accessible design improves usability and reaches more customers.

Digital typography

Web fonts

Brand typefaces must be licensed for web use. Guidelines should specify the web font files, weights and fallback fonts. Fallbacks are important, as fonts may fail to load on slow connections.

Sizes and spacing

Digital typography should define:

Base body text size, usually at least 16 px on websites.
Headline sizes for different screen widths.
Line height, usually 1.4 to 1.6 for body text.
Maximum line length for comfortable reading.

Multilingual websites

Websites in Sinhala, Tamil or Arabic need fonts that render these scripts correctly in browsers. Arabic websites need right-to-left layouts. Guidelines should include sample layouts for each language.

Components and design systems

A design system is a collection of reusable components and rules for building digital products. For many businesses, a simple component library within the brand guidelines is enough. It should cover:

Buttons: primary, secondary and text buttons, with hover, focus and disabled states.
Forms: input fields, labels, error messages and checkboxes.
Navigation: menus, headers and footers.
Cards: for products, articles and services.
Icons: style, size and usage.
Grids and spacing: consistent spacing units.

Defining these components ensures that every page looks consistent and that developers do not invent new styles for each project. It also makes future changes easier: when a button style is updated in one place, every page that uses it changes together.

Imagery for digital

Image style

Digital images should follow the same photography style as print, but guidelines should also specify:

Aspect ratios for common uses, such as 16:9 banners, 1:1 product images and 4:5 social posts.
File formats, such as WebP or JPG for photographs and SVG for icons.
Maximum file sizes for fast loading.
Alternative text (alt text) rules, so images are described for screen reader users and search engines.

Product images

E-commerce product images should have consistent backgrounds, angles and lighting. Guidelines should define the standard set of images for each product.

Social media guidelines

Social media is often managed by several people or agencies, so clear rules are essential. Social media guidelines should cover:

Profile images and covers: sizes and versions for each platform.
Post templates: for announcements, products, quotes, events and promotions.
Formats: square, portrait and story sizes for each platform.
Typography and colour: how much text to use, and which colours.
Photography and video style.
Captions and hashtags: tone of voice, brand hashtags and emoji use.
Accessibility: alt text, captions on videos and readable text sizes.
Approval process: who creates, checks and publishes posts.

Templates are particularly valuable. They allow teams to produce posts quickly while staying on brand. Our case study on a poster template system for an export distributor shows how one layout can support a whole series of product posts.

Video and motion

Video is now a major part of digital marketing. Guidelines should cover:

Opening and closing frames, including the logo animation.
Lower thirds and caption styles.
Music and sound guidance.
Subtitles, which help accessibility and viewers watching without sound.
Formats for different platforms, such as 16:9, 9:16 and 1:1.

Motion should also respect accessibility. WCAG includes requirements to avoid content that flashes more than three times per second and to let users pause moving content that lasts more than five seconds.

Email

Email templates should follow brand rules while working in many email programs, which often have limited support for fonts and layouts. Guidelines should specify:

Header and footer designs.
Fallback fonts.
Button styles.
Image sizes and alt text.
Legal information, such as unsubscribe links.

Digital guidelines and search visibility

Good digital guidelines support search engine optimisation. Consistent headings, descriptive alt text, fast-loading images and accessible structures help search engines understand content. Google’s guidance emphasises helpful, people-first content and a good page experience, both of which benefit from clear digital standards.

Digital advertising

Paid advertising on search engines, social media and display networks has its own constraints. Each platform sets image sizes, text limits and file sizes, and some reject adverts with too much text or unclear claims. Guidelines should include:

Approved layouts for the most common advert sizes.
How the logo appears in small display adverts, where space is very limited.
Rules for headlines and calls to action, such as “Order Now” or “Learn More”.
How offers, prices and terms are shown, so promotions are clear and honest.
Landing page standards, so the page a customer reaches matches the advert they clicked.

Consistent advertising helps people recognise the brand even when they see an advert for only a second. It also makes testing easier: when the layout stays the same, differences in performance are more likely to reflect the message or offer rather than the design.

Presentations and documents

Presentations, proposals and reports are among the most widely produced brand materials, yet they are often the least consistent, because they are created by many people across the business. Digital guidelines should include:

Presentation templates with title, section, content and closing slides.
Rules for charts, tables and diagrams, using brand colours that are distinguishable from each other.
Document templates for letters, proposals, quotations and reports.
Guidance on image quality, so low-resolution images are not stretched across slides.
Accessibility basics for documents, such as using real headings, adding alt text to images and checking contrast.

Templates set up with the correct fonts, colours and layouts allow staff to focus on content, while every document still looks professional.

Websites in several languages and markets

Businesses serving Sri Lanka and the Gulf often need websites in more than one language. Beyond fonts and right-to-left layouts, guidelines should cover:

How visitors switch languages, and where the language selector appears.
Whether images and examples change for each market.
How prices, currencies, dates and phone numbers are formatted.
How translated text is approved before publication.
How search engines are told which language each page uses, so the right version appears in search results.

Planning these details in the guidelines avoids inconsistent pages and broken layouts when content is translated.

Governance: keeping digital consistent

Digital content changes constantly, so governance is important:

Appoint a digital brand owner.
Store templates and assets in a shared, organised location.
Review the website and social channels regularly against the guidelines.
Test new pages for accessibility before publishing.
Update the guidelines when platforms change formats.

Performance as part of the brand experience

A slow website damages the brand as much as an inconsistent logo. Visitors leave pages that take too long to load, especially on mobile connections. Digital guidelines can support performance by setting limits on image file sizes, recommending modern image formats, limiting the number of web fonts and weights, and avoiding heavy animations that delay content. Google’s Core Web Vitals measure loading speed, responsiveness and visual stability, and they offer a practical way to check whether design choices are slowing a site down. When brand rules and performance goals are written together, designers and developers stop working against each other.

A simple digital checklist

Before any new page, post or advert is published, teams can check:

Is the correct logo version used, at the right size?
Do text and background colours pass contrast requirements?
Are fonts and sizes consistent with the guidelines?
Do images follow the photography style and have alt text?
Do videos have captions?
Are buttons and links clearly labelled?
Does the layout work on a phone?
Has the content been approved?

This short checklist catches most problems before customers see them. It can be printed, pinned beside the desks of the people who publish content, or built into the approval step of a content management system, so nothing goes live without a final check.

Illustrative example

The following example is illustrative and does not describe a real client.

A Colombo-based education provider has a strong orange brand colour. Its website uses white text on orange buttons, which fails contrast tests, and its social media posts are designed by three different freelancers in different styles.

A digital guideline project defines a darker orange for buttons and text, keeps the original orange for large graphics, and documents a component library. Social media templates are created for announcements, courses and events, in square, portrait and story formats. The website becomes easier to read, the social feed looks consistent, and new staff can create posts in minutes using the templates.

How Dsigngo Group builds digital brand rules

Our web, design and digital marketing teams work together to create digital guidelines. Our process includes:

Digital audit: reviewing the website, social media, email and advertising.
Accessibility testing: checking colour contrast, text sizes and components against WCAG 2.2.
Component design: creating buttons, forms, cards and other elements.
Templates: social media, email and presentation templates.
Documentation: clear rules with examples.
Developer handover: colour codes, typography settings and component specifications for web developers.
Training: showing teams how to use templates and check accessibility.

Frequently asked questions

Do we need separate digital guidelines?

Many businesses add a digital section to their main guidelines. Larger businesses with websites, apps and active social media may need a separate digital guide or design system.

Will accessibility change our brand colours?

Usually not. Most brands keep their signature colours and add accessible variations for text and buttons.

Can you create social media templates?

Yes. We create templates for posts, stories and covers in formats your team can edit easily.

How do we test colour contrast?

There are free online contrast checkers based on WCAG formulas. We include tested combinations in the guidelines, so your team does not need to test each time.

Do these rules help SEO?

Yes. Accessible structure, descriptive alt text and fast-loading images support both usability and search visibility.

Conclusion

Digital brand rules make sure your brand looks and works consistently on every screen. By defining digital colours, accessible combinations, typography, components, imagery, social media templates and governance, they help every team and agency present your brand correctly and make your digital channels usable for more people.

Dsigngo Group creates digital brand guidelines that combine brand design, web development and digital marketing expertise, for businesses in Sri Lanka, the UAE and international markets.

Ready to bring your brand rules into the digital age? Talk to Dsigngo Group about digital brand guidelines.

Create Your Digital Guidelines