You’re standing at the stove. Steam is rising from the pan. Your hands are dusted with flour. The recipe is propped against the backsplash, arm’s length away.
The text is small. Light gray. Set in a decorative script font. The instructions are a single paragraph, seven sentences long, describing four different actions with three timing cues and two temperature references.
You overcook the garlic. Again.
Your recipe isn’t being read at a desk. It’s being used in motion, from a distance, under imperfect conditions. If it’s not easy to read while cooking, it’s not finished.
Recipes are tools. Tools should be designed for use.
Recipes are procedural documents
A recipe isn’t an essay. It’s not a mood board. It’s not a Pinterest thumbnail.
It’s a step-by-step set of instructions for producing a specific outcome under time pressure, often while managing heat, sharp objects, and competing demands on attention.
People don’t read recipes — they scan them. They glance at the next step while stirring. They check ingredient quantities with floury hands. They try to remember the temperature while the oven timer is beeping.
Clear structure reduces errors. Chunking improves performance. Readability isn’t a nicety; it’s a functional requirement.
This isn’t complicated; it’s just often ignored.
Text size and contrast that actually work
Most recipe websites use body text between 12 and 14 pixels. Some go smaller. That’s readable at laptop distance — about 18 inches from your face, under controlled lighting, with your full attention on the screen — but that’s not how recipes are used.
Recipes are read from countertop distance, while standing, often with your face turned partially toward the stove, under mixed lighting — overhead fixture, natural light from a window, steam rising, maybe the oven light. Home cooks typically are standing up and walking around the kitchen, not sitting at a desk.
The web has strict text size requirements. WCAG 2.1 — the Web Content Accessibility Guidelines, which codify research about what makes text readable — recommends a minimum of 16 pixels for body text. Not as an accessibility accommodation, but as a baseline for usability.
Readability also depends on contrast. Light gray text on a white background may look elegant in a design mockup, but it’s a usability failure in a kitchen.
WCAG AA standards require a contrast ratio of at least 4.5:1 for body text — not because it’s legally mandated for home recipes, but because that’s the threshold where text remains readable under real-world conditions: dim lighting, tired eyes, screens with glare, outdoor grills at dusk.
Black text on a white background works. Dark gray on white works if the gray is dark enough. Light gray doesn’t, so stop using it.
Line spacing matters too. Text crammed together is harder to scan. WCAG recommends line height of at least 1.5 times the font size. This isn’t a design trend. It’s based on how human vision processes sequential information.
Readable text reduces mistakes. That’s the standard.
One action per step
Here’s a common recipe instruction:
Heat the oil in a large skillet over medium heat, add the onions and cook until softened, about 8 minutes, then add the garlic and cook for another minute until fragrant, then add the tomatoes and their juices and simmer for 15 minutes, stirring occasionally, until the sauce thickens.
This is a paragraph containing at least six discrete actions:
- Heat oil
- Add onions
- Cook onions for 8 minutes
- Add garlic
- Cook garlic for 1 minute
- Add tomatoes
- Simmer for 15 minutes
If you’re following this recipe, you have to reread the entire paragraph to find your place after each action. If you get distracted — and cooking involves constant distractions — you lose your position. You have to start over.
Here’s the same information as numbered steps:
- Heat the oil in a large skillet over medium heat.
- Add the onions and cook until softened, about 8 minutes.
- Add the garlic and cook for 1 minute until fragrant.
- Add the tomatoes and their juices. Simmer for 15 minutes, stirring occasionally, until the sauce thickens.
Now each action is its own step. You can glance at step 2, execute it, and move to step 3 without rereading the entire block. If you lose your place, you know exactly where to resume.
Breaking recipes into numbered, single-action steps doesn’t make them longer. It makes them usable.
Specific beats vague
Vague doneness cues are everywhere in recipes:
- “Cook until done”
- “Bake until golden”
- “Simmer until thickened”
- “Mix until smooth”
- “Sauté until soft”
These instructions assume the cook already knows what “done” looks like. They rely on visual assessment, subjective judgment, and prior experience.
They fail new cooks. They fail in dim lighting. They fail when you’re cooking something for the first time. And they fail blind cooks entirely.
Specificity prevents follow-up questions and failed dishes.
Vague: “Cook the chicken until golden brown.”
Specific: “Cook the chicken until the internal temperature reaches 165°F, about 6–8 minutes per side.”
The vague version tells you what the outside should look like. The specific version tells you what temperature the inside should reach — and gives a time range so you know roughly when to check.
Vague: “Bake until a toothpick comes out clean.”
Specific: “Bake for 25–30 minutes, until a toothpick inserted in the center comes out clean and the top springs back when lightly pressed.”
The specific version adds time (25–30 minutes) and a secondary tactile cue (springs back). Now you have three ways to check doneness instead of one.
Vague: “Simmer until the sauce thickens.”
Specific: “Simmer for 15–20 minutes, stirring occasionally, until the sauce coats the back of a spoon.”
Specificity doesn’t mean removing all judgment. It means giving the cook enough information to make an informed decision.
Time ranges help. Temperatures help. Texture descriptions help. And in many cases, offering more than one cue — visual plus tactile, or time plus temperature — makes the recipe more reliable across different cooking environments and skill levels.
Sensory cues beyond sight
Here’s a recipe instruction that only works if you can see:
“Cook the steak until browned on the outside and slightly red in the center.”
If you’re cooking on an outdoor grill at night, “browned” is hard to assess. If you’re colorblind, “slightly red” is ambiguous. If you have vision problems, this instruction may be useless.
Here’s a better version:
“Cook the steak for 3–4 minutes per side, until the internal temperature reaches 125°F for medium-rare.”
Temperature is information. Color is interpretation.
The first version assumes perfect lighting and color vision. The second version works in the dark.
This is not an edge case. Recipes should not rely on visual cues alone — not because it’s considerate, but because it’s more reliable.
Temperature
Temperature is objective. It doesn’t change based on lighting, color perception, or experience level. A recipe that says “bake at 375°F for 20–25 minutes” is clearer than one that says “bake until lightly golden.”
Use a thermometer for meat. Specify internal temperatures. Give oven temperatures and time ranges. This works for everyone.
Time
Time is a useful secondary cue. “Sauté the onions for 8–10 minutes” is better than “sauté until soft” because it gives the cook a reference point. They know when to start checking, even if the exact timing varies.
Time alone isn’t enough — stoves vary, pan sizes differ, ingredients release moisture at different rates. But time plus another cue (texture, smell, sound) creates a reliable checkpoint.
Texture
Texture is something you can feel, even when you can’t see clearly.
“Cook the pasta until al dente — it should have a slight firmness when bitten” is a tactile cue. “The dough should be smooth and elastic” describes how it feels in your hands. “The sauce should coat the back of a spoon” is something you can test by touch.
Smell
You’ll smell rather than see when nuts are perfectly toasted. Garlic becomes fragrant before it browns. Caramelized onions smell sweet. Butter smells nutty when it browns.
Including smell cues makes recipes more reliable: “Cook the garlic until fragrant, about 1 minute” is better than “Cook the garlic until lightly golden.”
Sound
Sound conveys information. The sizzle of frying tells you the oil is hot enough. The bubbling of boiling water indicates the temperature. The hiss of moisture evaporating from a pan means the food is starting to brown.
“Cook until the moisture has evaporated and the sound shifts from wet bubbling to a dry sizzle” is a sound-based doneness cue. It works when you’re not looking directly at the pan. It works in dim light. It works if you’re managing two burners at once.
Clear information hierarchy
A recipe has two main components: ingredients and instructions. They should be visually distinct.
Separate the ingredient list from the instructions. Don’t bury ingredient quantities in paragraph text. List them clearly, in the order they’ll be used.
Use subheadings for complex recipes. If a recipe has multiple components — a filling, a sauce, a topping — group the ingredients accordingly:
- For the sauce:
- For the filling:
- For the topping:
This helps the cook understand the structure before starting. It also makes it easier to prep components separately.
Use consistent ingredient naming. If you call something “butter” in the ingredient list, don’t call it “the fat” in the instructions. If it’s “brown sugar,” don’t switch to “the sugar” when there are two kinds of sugar in the recipe.
Consistency reduces cognitive load. The cook shouldn’t have to guess what “it” or “the mixture” refers to. Name things clearly and use the same name throughout.
Avoid pronoun ambiguity. “Add it to the mixture and stir it until it thickens” — which “it” is which? Rewrite for clarity: “Add the cornstarch mixture to the sauce and stir until the sauce thickens.”
Use whitespace intentionally. Space between ingredient list and instructions. Space between steps. Space between sections. Whitespace is not wasted space. It’s visual breathing room that makes content easier to parse at a glance.
Structure reduces friction. The cook should be able to understand the recipe’s organization in five seconds.
What “mobile-friendly” actually means
“Mobile-friendly” usually means responsive layout — the page adapts to smaller screens without horizontal scrolling. That’s necessary, but it’s not sufficient. A mobile-friendly recipe should answer these questions:
Can you read it from two to three feet away?
Your phone is propped on the counter, not held in your hand. You’re glancing at it from across the kitchen. Is the text large enough to read from that distance? If the answer is no, the font size is wrong.
Can you tap the next step with floury fingers?
Small tap targets fail when your hands are messy. Buttons and links should be large enough to tap accurately without precision.
Can you scroll without losing your place?
Long single-page recipes require constant scrolling. Every time you scroll, you risk losing your position. Step-by-step navigation can solve this — you tap “next” to advance, and only one step is visible at a time. This isn’t the only solution, but it’s better than a wall of text on a small screen.
Does the layout survive real-world conditions?
Kitchens have mixed lighting. Screens get greasy. Brightness gets adjusted. A recipe that looks good in a design file might be unreadable under a dim overhead light with a smudged screen.
Test your recipes in the kitchen. If you can’t read them while cooking, they’re not done. For more on designing digital tools that work in real kitchens, see our guide on accessible cooking tools.
Practical recipe writing checklist
Use this checklist when writing or formatting recipes:
- One action per step — no multi-sentence paragraphs describing five different tasks
- Include time ranges — “cook for 8–10 minutes” instead of just “cook until done”
- Include temperatures when precision matters — especially for meat, baking, and frying
- Add at least one non-visual cue per step — smell, sound, texture, temperature, or time
- Use consistent ingredient names — don’t switch between “butter,” “the fat,” and “it”
- Avoid vague phrasing — replace “until golden” with “until golden brown, about 20 minutes”
- Make text readable at arm’s length — minimum 16px font size, high contrast
- Number your steps — discrete, scannable steps instead of paragraphs
- Separate ingredients from instructions — clear visual hierarchy
- Test it in the kitchen — if you can’t follow it while cooking, revise it
This is not a compliance checklist. It’s a usability checklist. If your recipe passes these checks, it will be easier to follow — for everyone.
FAQ
What font size should I use for recipes?
Minimum 16 pixels for digital recipes, or 10–12 points for print. Recipes are read from countertop distance (2–3 feet away), not from typical reading distance. Larger text reduces errors and makes recipes usable under real kitchen conditions — dim lighting, steam, multitasking.
Why do recipe websites use such small, light gray text?
Because it looks elegant in design mockups. Light gray text (low contrast) creates a softer, more refined aesthetic that appeals to designers. But it fails under real-world conditions: mixed lighting, aging eyes, screens with glare. WCAG standards recommend 4.5:1 contrast ratio because that’s the threshold for reliable readability. Elegance doesn’t help you cook dinner.
Should recipe steps be paragraphs or numbered lists?
Numbered lists. Always. Paragraph instructions force the cook to reread the entire block to find their place after each action. Numbered steps let you glance, execute, and move to the next step without losing your position. This reduces cognitive load and prevents errors. One action per step is the standard.
How do I make recipes more accessible without making them longer?
Accessible recipes aren’t longer — they’re clearer. Break paragraph instructions into numbered steps (same content, better structure). Add time ranges and temperatures (more specific, not more words). Include sensory cues alongside visual ones (smell, sound, texture). Use consistent ingredient names (reduces confusion). These changes improve usability for everyone, not just people with disabilities.
What does WCAG have to do with cooking?
WCAG (Web Content Accessibility Guidelines) codifies research about what makes digital text readable under real-world conditions. The standards — minimum font size, contrast ratios, line spacing — aren’t arbitrary. They’re based on how human vision works under imperfect conditions. Recipes benefit from the same principles: readable text, clear structure, specific language. You don’t need to comply with WCAG legally, but applying its principles makes recipes more usable.
Why should recipes include non-visual cues?
Because not everyone can see clearly, and even people with perfect vision benefit from multi-sensory information. “Cook until golden brown” only works with good lighting and color vision. “Cook for 6–8 minutes until the internal temperature reaches 165°F” works in the dark. Non-visual cues (time, temperature, smell, sound, texture) make recipes more reliable across different conditions, skill levels, and abilities.
Recipes are functional documents, not aesthetic content. Structured recipes are easier to scale, translate, and search — and they’re designed for cooking, not for looking good on a screen. Sharp Cooking treats recipes like tools: clear, usable, and built for the kitchen.