Accelerate Nutrition · living style guideHow your website looks, and how to ask for it
Everything on this page is the real thing: real buttons, real type, real colours read from the website's own settings as the page loads. When the site changes, this page changes with it. Each section ends with the words to use when you ask for something.
The accessibility check
Under the colours, backgrounds and buttons on this page you will see a small badge like the one below. It compares a text colour with whatever sits behind it. Ordinary text needs a score of at least 4.5 to 1; large text, buttons and borders need at least 3 to 1.
The badges are worked out fresh every time the page loads, from the colours the site is using right now. If a colour is changed to something that does not pass, its badge turns red and says Fails. Nothing is typed in by hand, so the page cannot tell you a pairing passes when it no longer does.
Turn on JavaScript to see the live readings.
One badge on this page is red on purpose. In the Colours section the light blue is held up against white, which is a pairing that does not pass — the badge is there to show you why the light blue is a highlight colour rather than a text colour. Everything the site actually renders passes.
What to ask for "Check the contrast on this section before it goes live." If you see a red badge anywhere, tell Seddon Digital before publishing on that background.
Your colours
Ask for a colour by its job, not by its name or its code. Say "the highlight colour" or "the navy", and the right value is used everywhere. Six colours do all the work on the site; there is no seventh waiting to be invented.
Deep navy --secondary
The main colour. Dark sections, headings, button fill, and body text where it needs to be strong. It is readable on every pale background.
Deep navy as text on whiteLight blue --primary
The highlight colour. Button borders, icons, the thin rule beside a note, shapes, and the small line above a heading on navy sections. The badge below shows it against white, and it fails there — which is the reason it is a highlight colour and not a text colour. On navy it reads at nearly 8 to 1.
Light blue as text on whiteBody grey --neutral
Running text and small print on pale backgrounds.
Body grey as text on whitePale wash --accent
The very light grey background that separates one white section from the next.
Deep navy text on the pale washNear black --tertiary
Strong small print, and text that must not compete with a heading.
Near black as text on whiteWhite --base
The page background, and the text colour on navy sections.
White text on deep navyA second, very slightly different light blue is still sitting inside some of the illustrations and icons on the site. It is close enough that nobody would spot it, and it no longer appears in any text or background. Julian to confirm which of the two is the brand's blue, and we will make that the only one.
What to ask for "Use the highlight colour for that icon." "Put that panel on the navy." Never ask for a colour code — if a colour code is the only way to say it, the colour is not in the system yet and we should talk about adding it.
The three backgrounds
Every section of the site sits on one of three backgrounds. Pick the background and the text, links and buttons on it should already be the right colour. The badges under each panel check the three pairings that matter there: body text, a link, and the button label.
White
.bg-whiteBody copy on this background, with a link in running text so you can see both together.
Make a referralPale wash
.bg-lightBody copy on this background, with a link in running text so you can see both together.
Make a referralDeep navy
.bg--darkBody copy on this background, with a link in running text so you can see both together.
Make a referralFour other background classes exist in the site's files but are used nowhere: the older navy this page replaced in September, a mid grey, a light-blue fill, and one with a typo in its name. Seddon Digital will remove them so the list above stays the whole list.
What to ask for "Put this section on the pale wash." "Make the next section navy."
Buttons
These are real buttons, not pictures of them. Each page has one main action, and only one, as the main button. The quiet grey button is the second choice, for the action most people will not take.
The main button is a deep navy fill with a light blue edge, a white label, and the corner rounding used across the site. The label reads at 16 to 1 on both backgrounds, which is as clear as text gets. The arrow slides a little on hover, and that is the only movement a button makes.
On a navy section the navy fill matches the background, so the button is held together by its light blue outline alone. The outline is clear enough to pass on its own, but it is a thin one-pixel line: if you want the buttons on navy sections to read more strongly, ask and we will thicken the outline or lighten the fill.
The quiet grey button is light grey with a navy label. Its label is very readable, but on a white section its pale grey fill has almost no visible edge, so on white it reads more like a link than a button. Use it beside the main button rather than on its own — a page whose only button is the quiet one reads as having nothing to do.
The footer button, corrected 7 September
The button in the bar at the foot of every page used to be a white label on the light blue, which read at about 2 to 1 — the least readable thing on the site. It now uses the same navy fill as every other main button, at 16 to 1, so the footer matches the rest of the site.
What to ask for "Add a button that says Book an appointment." "Make the second one the quiet grey button."
Cards
A card is a white box with the same padding, corner rounding, shadow and heading size wherever it appears. Cards stay white even on a navy section, so the text inside them keeps the colours it has on a pale background.
Paediatric dietetics
Three or four lines of plain description, the length the cards on the site use.
Learn moreNDIS support
A second card, to show that the boxes line up and the headings sit at the same height whatever the length of the words.
Learn moreTelehealth
A third, so you can see how a row of three behaves and where it wraps on a narrow screen.
Learn moreCards already on the site: the service cards on the home page, the who-we-help cards, the appointment cards, the numbered step cards, and the article cards on the blog. They are five variations of one card rather than five different cards.
The "Learn more" links inside the article cards used to be set in the light blue, which did not pass on a white card. They now use the deeper blue that all links on pale backgrounds use, corrected on 7 September.
What to ask for "Put this in a card." "Make these three services cards."
Type
The whole site is set in Rubik — headings and body copy both. The logo uses Montserrat, and nothing else does. The sizes below are the ones the site really renders, measured on this page rather than copied from a plan.
Accredited Practising Dietitians
h1 · Rubik · the page title — one per pageAccredited Practising Dietitians
h2 · Rubik · a section headingAccredited Practising Dietitians
h3 · Rubik · a heading inside a section, or a card headingAccredited Practising Dietitians
h4 · Rubik · a small headingAccredited Practising Dietitians
h5 · Rubik · a label-sized headingBody copy. This is the size of running text across the site, and the size you get without asking for anything.
.text-md · Rubik 400 · 18px, 16px on a phoneCaptions, dates, disclaimers and small print sit at this size.
.text-sm · Rubik 500 · 14pxEvery heading is capitalised for you
A rule applied across the site puts a capital on each word of every heading, so a heading typed as "meet our dietitians" appears as "Meet Our Dietitians". Type headings normally and let the site do it; the one thing to watch is that small words such as and, of and the get a capital too.
Two sizes are pinned, and it is worth undoing
Section headings and the headings inside them are held at fixed sizes by an override left in the site's stylesheet, which does two things you can see on this page. Headings inside a section come out the same size as the small headings below them, so the step between the two is lost. And the override is strong enough that no ordinary styling can move it, which is why a heading on a navy background needs a special instruction just to be legible.
Nothing on the site is broken by this and no visitor will notice it, but it means the type scale is not yet a single ladder. Seddon Digital would like to remove the override so the sizes come from one place — a change that alters heading sizes slightly on several pages, so it needs your agreement first.
What a thing is, and how big it looks, are two different asks
The heading level says what a thing is in the outline of the page: the page title is level one, section headings are level two, headings inside a section are level three. The size is separate. Asking for a heading to look smaller does not change its level, and a screen reader still hears the outline correctly.
What to ask for "Set the opening paragraph as the big intro text." "Keep this as a section heading but show it smaller." "This line is not a heading, it just needs to be big."
Quotes
A quote block is for words that came from somebody — a client, a dietitian, a support coordinator, a guideline. It is not a way to make a sentence bigger. If the words are yours and you only want them to stand out, ask for the big intro text instead.
They explained my daughter's feeding plan in a way we could actually follow at home, and checked in until it was working.
A parent, quoted with permission
The quote sits in a bordered box on the pale wash. The line underneath is optional: leave it off when the quote is anonymous, and never invent a name for it.
This block is built and ready but is not yet used on any page. It is here so that the first quote you ask for looks like every quote after it.
What to ask for "Make this a quote and credit it to the parent." "This one is anonymous, no name."
Small lines above headings
Most sections of the site open with a short line in light blue above the heading. Two questions decide how it is built, and the answer changes what a screen reader hears.
It changes what the heading means
NDIS dieteticsSupport that fits the plan you already have
Without "NDIS dietetics" that heading could be about anything, so the small line is the first line of the heading itself and a screen reader hears the two together.
It only names the topic
Meet our dietitians
Our team
"Our team" only names the topic, so it is a label written after the heading and shown above it. A screen reader hears the heading first, which is the right way round.
It is just a number
- Get in touch, or send a referral.
- We match you with the right dietitian.
- You start, in clinic or by telehealth.
The numerals on the steps are not typed in. The steps are a numbered list and the big numbers are drawn from it, so they renumber themselves when a step is added or removed.
These small lines used to be the most common contrast problem on the site: in the light blue on a white background they read at about 2 to 1. On 7 September the ten that sit on pale backgrounds were changed to the deeper blue, and the three on navy sections — like this one — kept the light blue, where it reads at nearly 8 to 1. Both are correct now, and the right one is chosen for you by the background.
What to ask for "Add a small line above the heading that says NDIS dietetics, it is part of the heading." "Add a label above this heading that says Our team." "Number these steps."
Photos
Photos get the same soft corner rounding as the cards. In a card a photo is cropped to a wide frame; a dietitian's portrait is a circle. Most photos need no caption — where one helps, such as naming a team member, it sits underneath in the small print size.
- Every photo carries a short description for people using a screen reader. Tell us who or what is in the picture and we write it in.
- Do not put words inside a picture. Type them as text so they resize on a phone and can be read aloud.
- A replaced photo needs a new file name, or people who have already visited keep seeing the old one.
- Send the largest version you have. We resize down; we cannot add detail that is not there.
What to ask for "Add this photo as a round portrait with the name underneath." "Swap the photo on the NDIS page."
Icons, motion and links
- Icons are drawn in the page rather than loaded as pictures, so they stay crisp at any size and take their colour from the section they sit in.
- Anything that moves — the team slider, the button arrow — stops moving for people who have asked their device to reduce motion.
- Every button and tap target is at least 44 pixels, and shows a clear ring when reached by keyboard.
- A link that opens a new tab should say so. Links within the site open in the same tab.
- An icon sitting next to words is decoration. An icon used instead of words needs a name, so a screen reader can announce it.
Shapes are drawn, not pictured
The circles behind photos, the pills, the rules between sections and the menu button are all drawn with code. They weigh nothing and follow the colour of their background.
What to ask for "Make this link open in a new tab" — only for links that leave the site. "Add a small icon before each item; the words carry the meaning."
Which colour goes on which
Reference, for when you are not sure. Your six colours against your three backgrounds, worked out as the page loads. The names are the same ones used in the Colours and Backgrounds sections above, so you can look a colour up either way round.
Working out the readings…
What to ask for "Is this colour safe on that background?" Point at the row and the column. If it says no, ask us which colour to use instead rather than lightening the one you have.