How to Design UI Cards That Pass WCAG 2.2 and Communicate Hierarchy

A card is a promise of action. Every card you place on a screen, whether it shows a product, a profile, or a news story, invites a tap. That invitation must survive every state the card passes through: resting, hover, focus, active, loading, and empty. If any state breaks the promise, the reader hesitates. Hesitation in a booking flow costs a conversion.

The measurable requirements come down to the size of the clickable area, the contrast of the non-text boundaries, and the visibility of the focus indicator. WCAG 2.2 Success Criterion 2.5.8 sets a minimum target size of 24 by 24 CSS pixels for any pointer input. Apple's Human Interface Guidelines go further, recommending 44 by 44 points. These are not equivalent units. A CSS pixel and an Apple point are both abstract units, but they map to physical pixels differently depending on the device's scale factor and the browser's zoom level. A 24-px target on a 2x display is 48 physical pixels. The WCAG figure is a floor for the web; the Apple figure is a platform-specific comfort zone. Design for the web at 44 CSS pixels and never dip below 24.

Why small tap targets fail

The failure case is familiar. You are on a mobile travel site at 1am, trying to book a train ticket. The card for the 06:42 departure has a 20-pixel tap area, and your thumb keeps hitting the card next to it. The focus ring is a faint blue outline that disappears on hover, so you cannot tell where you are. The card boundary is a light grey on a white background, contrast ratio 1.8:1, invisible in sunlight. You give up and book through the operator's native app. That reader is not coming back.

The fix is not a bigger font or a shinier shadow. It is a persistent outline, a hit region that extends into the card's spacing and border, and a boundary that meets the 3:1 non-text contrast ratio from WCAG 2.2 Success Criterion 1.4.11. The card's edge, the icon inside it, and the focus indicator all need that ratio against the background. A Figma auto layout card component with 16 dp of internal space and a 24-px hit target will beat a hand-crafted card with 8 px of breathing room every time.

Build the interactive states table before any visual styling. Resting state: the card sits at its elevation token, normally 0 to 6 dp in Material Design 3, with a subtle border or shadow defining its edge. Hover state: the card lifts to 8 or 12 dp, but only if the pointer can hover. On touch devices there is no hover, so you need a fallback. Focus state: the card shows a persistent outline, not just a colour change. The outline must be at least 2 px thick and have a 3:1 contrast ratio against the card background. Active state: the card depresses or changes its background colour to show it has been pressed. Loading state: the card shows a skeleton or a spinner, but the content area does not shift. Layout jump is what breaks the experience. Empty state: the card shows a message like 'No results' but the card itself remains interactive, so the reader can tap it to retry.

Content choreography and spacing

Content choreography is the discipline of arranging these states. The card's title, subtitle, and call-to-action button each need their own spacing rules. The CSS box model spacing and border are not decorations; they are the hit area. A card with a 20-px tap area fails WCAG 2.2. A card with a 24-px tap area passes, but just barely. A card with a 44-pt tap area, per Apple HIG, is comfortable.

The interactive state must be visible on the entire card, not just the button inside it. The whole card is clickable. Make it so. That means the card's border, internal spacing, and any background image all count toward the target size. A card that is 300 px wide and 200 px tall has a generous target. But a card that is 100 px by 100 px, with 10 px of internal space, has a visible boundary that is smaller than the interactive area. The reader cannot tell where to tap.

WCAG 2.2 sets the 24 by 24 CSS pixel minimum. Do not mistake the floor for the target. Success Criterion 2.5.8 is explicit: the target must be at least 24 by 24 CSS pixels, with exceptions for inline links, legal agreements, and cases where the target is in a sentence or the space is constrained. The reason is not arbitrary. It is the median size of a fingertip pad on a capacitive touchscreen. But fingers are not precise, and thumbs move. A 24-px target is a small target. On a 5.5-inch phone, that is about 2 mm by 2 mm. On a 13-inch tablet, it is smaller in visual terms. Apple recommends 44 by 44 points, roughly 7 mm by 7 mm on a 1x display. Material Design recommends 48 by 48 dp, which is larger still. The unit differences matter because a point in Apple's HIG is not the same as a CSS pixel, and a dp in Material is not the same as a physical pixel either.

Worked example: hotel card in Lisbon

You have a card showing a hotel room in Lisbon. The card is 300 px wide, with 16 px of internal spacing around the content. The tapable area is the entire card, including that spacing. That gives you a 300 px by 150 px target, which is fine. But then you add a secondary action, a 'Save' icon in the top-right corner. The icon is 20 px by 20 px, inside a 24 px by 24 px hit area. That fails WCAG 2.2. The fix is to increase the hit area to 44 px by 44 px. Add negative margin to the icon's button so the spacing expands the target without changing the visual size.

Now the card boundary itself: a light grey border on a white background fails 1.4.11. The fix is a darker grey, or a shadow with enough contrast. The card's elevation token in Material Design 3 is 1 dp resting, 0 dp border. The shadow is not enough to define the edge, so add a 1-px stroke. That stroke must meet 3:1 against the page background. A mid-grey on white, heavier than you think.

Typography separates a card that works from a card that confuses. The typographic scale inside the card must do the work that a heading style, a body style, and a caption style would do on a page. The title, if it is a link or the whole card is a link, must be in a typeface and weight that reads as a heading. The subtitle is lighter and smaller. The body text is 16 px or 17 px, with a line height of 1.4 to 1.5. The metadata, like distance or price, is 12 px to 14 px. Do not go below 12 px. Smaller fails for many readers with low vision.

The x-height matters: a typeface with a tall x-height can pass the 4.5:1 contrast ratio at 16 px where a low-x-height face fails. Arial, Helvetica, and System UI all have tall x-heights. A typeface like Didot, with its hairline strokes, will fail at any size below 24 px.

Weight, colour, and proximity

The typographic hierarchy is not just about size. It is about weight, colour, and spacing. The title sits at 20 px semibold, the body at 16 px regular, the metadata at 13 px with a higher line-height. Content choreography dictates that the title has more top margin than the body, and the body more than the metadata. This creates proximity grouping: elements that belong together are visually closer.

The card's internal space, at least 16 dp per Material Design 3, gives the text breathing room. The safe area inside the card is not the same as the safe area outside the card on a phone screen. The internal safe area keeps text from touching the card's edges. The external safe area keeps the card from touching the screen's notch or rounded corners. Both matter. If the text touches the card's edge, the reader reads it as a mistake. If the card touches the screen's edge, the reader taps it by accident.

Start with the semantic HTML, not the visual layer. Use the article element for the card, because it communicates that the card is a self-contained composition. The title inside the card is a heading, and the card's link or button wraps the entire card or uses ARIA labelledby to point to the title. If the whole card is a link, the link text is the title, and the card's other content is inside the link. If only the title is a link and the card has a separate button, you have two interactive elements. Each needs its own focus indicator.

Do not wrap the entire card in a link and then add a button inside it. That is invalid HTML and it breaks screen reader navigation. The card's background colour, text colour, and border colour all need to meet the contrast ratios. The 3:1 non-text contrast requirement for card boundaries is WCAG 2.2. That applies to the card edge against the page background, and to the focus indicator against the card.

Responsive reflow and layout switching

Responsive layout reflow is where most card layouts fail. A card that is 300 px wide on a desktop might need to be 100% width on a 320-px screen. CSS Grid and Flexbox handle the reflow, but the card's internal spacing, typography, and hit area must not shrink. At 320 px, a card with 16 px of internal space on each side leaves room for content. The title, body, and button still fit.

But if the card has a horizontal layout, with an image on the left and text on the right, the image collapses at 320 px. The text becomes the only content. Use a media query that switches the card to a vertical layout below a sensible breakpoint. The card's target size stays 44 px or larger, the internal space stays 16 dp, and the typography stays legible. The focus indicator is persistent, not just on hover. The entire card is a target. The reader never has to guess where to tap.

What is the WCAG 2.2 touch target minimum?

24 by 24 CSS pixels, per Success Criterion 2.5.8. That is a floor, not a recommendation. Design to 44 by 44 CSS pixels to match Apple HIG comfort or 48 by 48 dp per Material Design 3.

Does the entire card need a 3:1 contrast ratio?

No. Only the card's boundary, icons, and focus indicator need 3:1 against adjacent colours per WCAG 1.4.11. Text inside the card needs 4.5:1 for normal text, 3:1 for large text.

Can a focus indicator be a colour change?

No. Colour change alone fails WCAG 2.4.13. The focus indicator must be a shape change, a 2-px outline, or an icon that does not rely on colour. It must have 3:1 contrast.

What is the difference between margin and padding in a card?

Margin is space outside the card's border; padding is space inside the border. Margin collapses between adjacent cards; padding does not. Both contribute to the tap target when the card itself is clickable.

A card with a 20-pixel tap area and a 1.8:1 boundary contrast is the reason a traveller abandons a 1am train booking, and the fix is a 44-px hit region with a persistent 2-px outline, not a prettier shadow.