Colour in Graphic Design: Contrast, Accessibility, and Cross-Media Specifications

Start with what you are producing, then follow the route below to the section that governs your task. Graphic design is structured visual problem-solving, and colour is one of its most constrained variables. Every recommendation on this site that pairs a foreground and background colour must carry its WCAG 2.2 contrast ratio, calculated precisely from the relative luminance of each colour in the sRGB colour space. Automated checkers can report false passes by sampling a single antialiased edge pixel, so the numbers you see here are the authority, not a browser plugin's summary.

Before touching a colour picker, decide what medium will receive the work. This single decision determines which colour model, which ICC profile, and which contrast standard will apply. The screen and the printing press do not share a colour language. Pretending otherwise is the fastest route to a failed deliverable.

Screen Output

If you are building anything that will be viewed on a phone, monitor, or projector, you are working in the sRGB colour space by default. Your contrast calculations must use the relative luminance formula defined by the W3C.

Print Output

If the final output is ink on paper, you are committing to the CMYK colour space and a specific characterisation data set, such as the Fogra characterization data for your region and stock. The page routes by your production goal, so read on for the path that matches your brief.

If your task is building a brand palette that must reproduce consistently across both screen and print, understand this: the sRGB colour space and the CMYK gamut overlap only partially. Screen colours like pure red at #FF0000 or pure green at #00FF00 sit outside the printable gamut of most offset processes. When you convert an RGB design to CMYK at export, saturated cyans and greens will dull. The result is the classic complaint that the print looks muddy compared to the screen.

The fix is not to design in CMYK from the start. Work in a wide-gamut RGB like Adobe RGB (1998), soft-proof using the ICC profile for the actual printing condition, Coated FOGRA39 for European coated stock, GRACoL 2013 for North American coated, then convert with a deliberate rendering intent. For photographs, use Perceptual. For spot colours and vector graphics, Relative Colorimetric with Black Point Compensation is the rule.

This section links to choosing-brand-colors and cmyk-vs-rgb for the deep dive. The key number to carry away is the coverage difference: sRGB covers roughly 35% of the CIE 1931 xy chromaticity diagram, while Adobe RGB covers about half of it, according to the defined colour space primaries. That gap is your warning that what you see on a wide-gamut monitor is not what the press will hold. If a client insists on a fluorescent orange, tell them now, in writing, that Pantone Matching System spot colours are the only ink that can approach it, and that the cost per sheet goes up accordingly. Skip the headache by setting expectations early. Never let a screen proof be the final sign-off without a contract proof viewed under ISO 3664 D50 viewing conditions.

Ensuring a design meets accessibility standards is a non-negotiable legal and ethical minimum. It is not guesswork. The WCAG 2.2 contrast requirements are the hard numbers. For normal text, the AA minimum is 4.5:1. For large text, defined as at least 18 point or 14 point bold, the AA minimum drops to 3:1. The AAA enhanced standard demands 7:1 for normal and 4.5:1 for large text. UI components and graphical objects, think icons, borders, and form outlines, need 3:1 against adjacent colours.

How the Ratios Are Calculated

These ratios derive from the relative luminance formula, (L1 + 0.05) / (L2 + 0.05), computed in sRGB. A common failure is a contrast checker that samples a rendered pixel where subpixel rendering has blended the text colour with the background, producing a false pass. The ratio can be inflated by as much as 1.5:1 in that single sampled pixel. Do not trust the plugin. Compute the ratio from the hex codes themselves.

Testing for Colour Vision Deficiencies

Designing an accessible colour set is not about avoiding colour blindness entirely, no set survives every form of anomalous trichromacy, but about testing with simulation. Run your palette through a colour blindness simulation tool and check that no two states of the interface rely on hue alone. Red-green deficiency is the most common; large-scale population studies consistently report it affects roughly 8% of men. Blue-yellow and monochromacy exist too. The accessible colour palette design section gives you the method: establish a neutral base, add a single accent, and verify every pairing against the WCAG 2.2 numbers before you commit. The WCAG 2.2 colour contrast requirements page walks through the calculations with worked examples. If you are the only designer in the room, cite the standard itself, not your taste, when defending a palette change.

When your output is a brochure, a packaging dieline, or a direct mail piece, you have left the world of exact screen simulation. Colour management print screen workflows are where professional design either earns its keep or falls apart. The chain is: capture or create in a wide-gamut RGB, convert to the destination CMYK using the correct ICC profile, and soft-proof on a monitor calibrated to D50 and 5003 K, the white point of ISO 3664:2009.

Choosing the Right Profile

The characterisation data published by Fogra, Coated FOGRA39 for gloss and matte coated stocks, Uncoated FOGRA29 for uncoated, defines the ISO 12647-2 printing conditions. North America uses GRACoL 2013 and SNAP 2013. Newsprint uses ISOnewspaper26v4. Do not mix these up. Sending a FOGRA39 file to a newsprint press guarantees a shift toward magenta and a loss of shadow detail.

Total Ink Coverage Limits

The specific failure mode to watch is total ink coverage, expressed as a percentage. Coated offset under FOGRA39 allows 330%, while uncoated FOGRA29 drops to 300%, and newsprint is even tighter at 240%. Exceed those limits and ink will not dry, causing set-off on the stack. A preflight check in the Ghent Workgroup standard will catch this before it costs you a print run. The Ghent Workgroup publishes preflight specifications that every reputable printer follows. Your file should be validated against them.

Also, remember that a spot colour specified as a Pantone Plus V4 swatch in the ICC profile will not match its screen proof. The physical swatch book is the only authority. Print production is the one place where what you see on screen is genuinely not what you get. The gap is not a defect in your eyes; it is the physics of light versus ink.

Every designer has faced the CMYK RGB colour space selection dilemma and defaulted to a guess. Stop guessing. The rule is simple: if the output is a screen, work in sRGB and export to sRGB. If the output is print, work in a wide-gamut RGB like Adobe RGB for the creative phase, then convert to the destination CMYK at the very end. The reason is gamut. The CMYK gamut is smaller than sRGB in saturated cyans and greens, meaning those colours will clip. But it is not a simple matter of 'smaller is always worse'. The CMYK gamut contains some muted, desaturated colours that sRGB cannot display either, though these are rarely missed.

Rendering Intents Explained

The decision affects the file's rendering intent, which is the instruction for how to handle out-of-gamut colours. Perceptual intent compresses the entire gamut to fit, preserving relationships but distorting every hue slightly. Relative Colorimetric clips the out-of-gamut colours and remaps the white point, preserving everything else. For spot colour work, Relative Colorimetric is correct because it keeps the specified hue intact. For photographs, Perceptual is safer.

The ICC Profile Mechanism

The ICC profile mechanism is the translator between devices. Each profile characterises a device's colour response, and the colour management module uses it to convert between spaces. The ISO 15076-1:2010 standard defines the profile format itself. When you receive a file from a printer, it should embed the output intent, a single ICC profile for the destination condition. If it does not, reject it. The PDF/X-1a output intent is a required field. This is not a detail for the production manager to handle alone. It is the designer's responsibility to specify the correct profile at the start of a job. Get it wrong and the print will be 10-15% darker and shifted magenta, a classic symptom of an uncalibrated sRGB workflow sent to a FOGRA39 press.

Accessible colour palette design is not about making everything grey or beige. It is about ensuring that every piece of information conveyed by colour is also conveyed by another means: shape, position, text, or pattern. And that the contrast ratios meet the WCAG 2.2 AA standard at minimum.

Building the Palette Step by Step

Start with a neutral base of blacks, whites, and greys that pass 4.5:1 on white. Then add one accent colour, chosen for its hue, and verify that accent against white, black, and the neutral greys. The accent's lightest tint, a 20% tint of a brand blue, must still hit 3:1 when used as a UI component background. Test with a colour blindness simulation. If your two states are distinguishable only by red and green, you have failed. Use blue and orange, or purple and yellow, which hold up better under protanopia and deuteranopia.

Surviving the Rendering Intent

The palette must also survive the rendering intent of the medium. On screen, you are working in sRGB and the hex codes are your source of truth. In print, the same hex code will shift, so the accessible palette must be defined in both RGB and CMYK, with the CMYK values generated from the ICC profile for your print condition. A palette that looks accessible on screen may fail when the dark grey you chose as text turns into a muddy brown in print because the black ink has a warm cast. The colour management print screen workflow is not optional. It is the only way to ensure the accessibility claim survives production. When a client asks for 'on brand' colours that fail contrast, you now have the authority of WCAG 2.2 to push back.

Colour harmony structured practice is the most misunderstood element of this craft because it is often taught as mysticism. The structured part is the key. There are named harmonies: complementary, analogous, triadic, split-complementary. They are a starting grid, not a destination. A complementary pair like red and green is high-contrast and energetic. It is also the worst possible choice for a colour-blind user. An analogous scheme of blues and greens is calming but can fail contrast minimums if the hues are too close in luminance.

The structured practice is to take a harmony rule and then apply the contrast ratio formula to every pairing. Adjust the lightness and saturation until the dominance of the hue carries the message without breaking legibility.

This is where the page that links to color-harmony begins. The rule for not looking formulaic is to break the harmony with a single discordant note: a flash of yellow in a blue palette. Do it with intent, not accident. The intent is judged by whether the audience understands the action to take. If the call-to-action button is the only orange element on the page and it meets the 3:1 UI contrast requirement against the background, you have used the harmony to direct behaviour. If it is just decorative, you have added noise. The precise numbers matter more than the specific colour wheel position. A palette that passes the contrast checks but looks bland has a different problem than one that fails. It needs more tonal variation, not more hues. Add light greys and dark charcoals before you reach for a new colour.

Standard / Condition	Reference / Value	Notes for the Designer
WCAG 2.2 AA normal text	4.5:1	Minimum for body text under 18pt (or 14pt bold)
WCAG 2.2 AA large text	3:1	Applies above the size thresholds
WCAG 2.2 UI components	3:1	Graphical objects, form outlines, icons
Viewing condition	ISO 3664:2009 D50	5003 K, 90 lux for soft-proofing
Coated offset profile (EU)	Coated FOGRA39	ISO 12647-2:2013, TIC limit 330%
Uncoated offset profile (EU)	Uncoated FOGRA29	ISO 12647-2:2013, TIC limit 300%
North America coated	GRACoL 2013	CGATS 21-2 CRPC6, TIC limit 320%
Newsprint profile	ISOnewspaper26v4	IFRA, TIC limit 240%
Wide-gamut RGB working space	Adobe RGB (1998)	Gamma 2.2, about 50% of CIE xy gamut
Spot colour library	PANTONE+ Solid V4	Used in Adobe CC 2026, verify annually

Creating combinations that do not look formulaic is the bridal section of this page. The trap is the colour wheel itself. Every designer has used a triadic scheme and watched it look like a child's toy. The escape is in the relative luminance, not the hue. Take two colours from the same hue family, vary their lightness by 40% or more, and pair them with a neutral. That is a structured practice. Then add a third hue as an accent, and check that the accent alone can carry the meaning. The formulaic look appears when all three colours have equal saturation and equal luminance. Break that equality and the palette becomes sophisticated.

The numbers to remember are the contrast ratios between the text and the background, and the ratio between the UI element and its adjacent colour. If those numbers hold, the combination is not formulaic. It is disciplined.

Ignore the trend articles and the 'Pantone colour of the year' marketing. Those are advertising, not evidence. The site labels the difference plainly: a swatch from a design blog is a suggestion; a WCAG contrast ratio is a measurement. When you see a palette marketed as 'accessible', ask for the specific ratio it achieves on white, not just a screenshot. The APCA contrast method, a draft candidate for WCAG 3.0, may eventually replace the simple ratio. It is not yet a W3C standard, so the 4.5:1 and 3:1 numbers are the ones you can enforce today. A palette that looks good in a mockup but fails on a dimmed phone screen in sunlight is a failure in the real world. The ratio is the only honest predictor.

The production specs are non-negotiable. They are the difference between a file that prints and a file that fails. The bleed is the printed area that extends past the trim line, typically 3 mm on each side in ISO 216 A-series. It is not optional. The slug is the unprinted area outside the bleed for printer marks. You do not need to design there, but the printer's marks will occupy it. The margin is the safe area inside the trim. The printer's tolerance means content placed at the exact trim edge can be cut off. If the printer specifies a 3 mm safe margin, believe them. A common failure is a background that ends exactly at the trim, leaving a white sliver on the press sheet. Extend the background into the bleed.

Exporting with an Output Intent

When you export, the file must have an output intent, which is the ICC profile for the destination condition. In PDF/X-1a, this is mandatory. A preflight check against the Ghent Workgroup specifications will catch RGB images, missing bleeds, and total ink coverage above the limit.

The Single Most Practical Action

Download the ICC profile for your printer's condition, Coated FOGRA39 for most of Europe, GRACoL 2013 for North America, and install it. Then export a test file and soft-proof it. Look at the display, then look at the gamut warning. If you see grey warning clouds where your brand colours should be, you are trying to reproduce a colour that ink cannot hold. Make a decision: dull the colour to fit the gamut, or switch to a spot colour for that element. That decision, made early with the numbers in front of you, is the difference between a project that ends in a press check and one that ends in a reprint.

The one thing to take from this page is not a colour. It is the method of measuring every colour decision against the standard that governs its output. The WCAG 2.2 contrast ratio is the threshold for accessibility. The ICC profile and Fogra characterization data are the thresholds for print fidelity. The ISO 3664 viewing condition is the threshold for proofing. A designer who ignores these is not being creative. They are being wilfully ignorant of the material they work with.

The page routes you to the deeper guides, but the first step is always the same. Open a new document. Set your colour settings to the correct working space: sRGB for screen, Adobe RGB for wide-gamut print work. Define your paragraph and character styles with an x-height and weight that contributes to legibility, not just aesthetics.

When you close this page, do not open a colour picker and start guessing. Write down the deliverable you are producing, the output medium, and the ISO or WCAG standard that governs it. If it is a screen, note the sRGB hex code for every colour and calculate the contrast ratio for every pair. If it is print, note the ICC profile, the total ink coverage limit, and the rendering intent. Then, and only then, choose a colour. The specific hex code is the last decision you make, not the first. That is the structured practice. The alternative is a design that looks good in a vacuum and fails in the world, on a dimmed phone, under a faulty press, or in front of a visually impaired user. The craft of graphic design is not in the choice of blue. It is in the defence of that blue against every constraint physics, law, and production can throw at it.

"The specific hex code is the last decision you make, not the first," because it redefines the entire design process as one of constraint-led specification rather than aesthetic preference, a viewpoint that is specific to a page that routes by production task and demands a defendable, measurable rationale for every colour choice.