Logo & Brand Asset Specifications (WCAG + Web Ready)

Logo Specifications

Recommended Size: 720 x 720 pixels (square)
Minimum Size: 250 x 250 pixels
Maximum Size: 1024 x 1024 pixels
Aspect Ratio: 1:1 (square)
File Size: Maximum 5MB
File Format: PNG or JPG
Image Quality: High-resolution to prevent pixelation
Background: Transparent preferred for PNG files
Scaling & Legibility: The icon must remain recognizable at all sizes, including favicon applications.
Color Compliance (WCAG 2.1 AA+):
- Contrast Ratio: Minimum 4.5:1 for normal text/icons; 3:1 for large-scale elements.
- Accessibility Consideration: The icon must maintain distinguishability against both light and dark backgrounds.
- Monochrome Adaptation: The icon must support grayscale or single-color versions while maintaining visibility.
- Reference: https://www.w3.org/TR/WCAG21/

Recommended Size: 184 x 44 pixels
Minimum Size: 120 x 30 pixels
Maximum Size: 368 x 88 pixels
Aspect Ratio: 4.18:1
File Size: Maximum 5MB
File Format: PNG or JPG
Image Quality: High-resolution to ensure sharp text rendering
Background: Transparent preferred for PNG files
Scaling & Legibility:
- Must remain fully legible at a minimum height of 12px on digital screens.
- Wordmark should maintain clarity at 100% zoom without distortion or aliasing.
Color Compliance (WCAG 2.1 AA+):
- Contrast Ratio: Minimum 4.5:1 for normal text; 3:1 for large-scale text.
- High Contrast Alternatives: A white or black version of the wordmark should be available for use in extreme contrast environments.

Example:

To ensure consistency across devices and browsers, the following favicon and web application icon sizes are required:

File Name	Recommended Size	Minimum Size	Maximum Size	Purpose/Usage
android-chrome-192x192.png	192 x 192 px	144 x 144 px	256 x 256 px	Android home screen icon
android-chrome-512x512.png	512 x 512 px	384 x 384 px	1024 x 1024 px	Android splash screen icon
apple-touch-icon.png	180 x 180 px	120 x 120 px	256 x 256 px	Apple devices (iOS home screen)
favicon-16x16.png	16 x 16 px	16 x 16 px	32 x 32 px	Browser favicon (smallest size)
favicon-32x32.png	32 x 32 px	16 x 16 px	64 x 64 px	Standard browser favicon
favicon.ico	16x16, 32x32, 48x48 px	16 x 16 px	48 x 48 px	Windows & legacy browsers (multi-size ICO format)
site.webmanifest	JSON metadata	N/A	N/A	Defines icons for web apps

Reference for favicon generation & best practices: https://favicon.io/favicon-converter/

To properly link the favicons and web manifest, include the following tags inside the <head> section of the HTML document:

html

CopyEdit

Example:

Example Darkmode:

All logo elements (icon, wordmark, favicon) must follow strict color accessibility standards to ensure clarity across all backgrounds.

Color Purpose	HEX	RGB	CMYK	WCAG Compliance
Primary Color (Brand Blue)	#0057B7	0, 87, 183	100, 52, 0, 28	WCAG AA+ (4.5:1 Contrast)
Secondary Color (Brand Yellow)	#FFD700	255, 215, 0	0, 16, 100, 0	WCAG AA+ (4.5:1 Contrast)
Dark Text (High Contrast Black)	#000000	0, 0, 0	0, 0, 0, 100	WCAG AAA (21:1 Contrast)
Light Text (Accessible White)	#FFFFFF	255, 255, 255	0, 0, 0, 0	WCAG AAA (21:1 Contrast)
Grayscale Background (Accessible Gray)	#F2F2F2	242, 242, 242	3, 2, 2, 0	WCAG AA (7:1 Contrast)

Color Purpose	HEX	RGB	CMYK	WCAG Compliance
Primary Color (Brand Blue - Dark Mode)	#4A90E2	74, 144, 226	66, 36, 0, 11	WCAG AA+ (4.5:1 Contrast)
Secondary Color (Brand Yellow - Dark Mode)	#FFC107	255, 193, 7	0, 25, 97, 0	WCAG AA+ (4.5:1 Contrast)
Dark Text (Dark Mode White Text)	#FFFFFF	255, 255, 255	0, 0, 0, 0	WCAG AAA (21:1 Contrast)
Background (Dark Mode Gray)	#121212	18, 18, 18	0, 0, 0, 94	WCAG AA (7:1 Contrast)

Dark Mode Considerations:

The logo must adapt to dark mode interfaces by switching to high-contrast alternatives.
The light version of the wordmark should be used in dark mode, ensuring a minimum contrast ratio of 4.5:1.
Icons must be optimized for inverted or light-on-dark settings.

- RGB (sRGB): Digital use (web, apps, presentations)
- CMYK: Print applications
- SVG/EPS: Scalable vector format for high-resolution applications

- A minimum clear space equal to 10% of the logo’s height must be maintained on all sides.

- The aspect ratio must remain intact at all scales. Stretching, skewing, or warping is not permitted.

WCAG 2.1 Guidelines for Color & Contrast Accessibility: https://www.w3.org/TR/WCAG21/
Favicon Creation & Conversion Best Practices: https://favicon.io/favicon-converter/

This document ensures full compliance with light and dark mode branding across corporate digital and print environments. 🚀