How Should You Choose Colors for Pagination? How to Make the Current Page Easy to Identify

Pagination is navigation that shows a user’s current position and available destinations when an article list, search results, or other content is split across multiple pages. A clear color scheme keeps ordinary page numbers quiet and emphasizes only the current page. However, the current page should not be communicated by color alone. Combine color with a thicker border, bold text, and programmatic current-page information.

Keep ordinary pages neutral and emphasize only the current page

In the following HEX examples, where HEX is a hexadecimal color code used on the web, use white ■#FFFFFF for the pagination background. Dark blue-gray ■#334155 page-number text provides about 10.35:1 contrast against white. If a border is needed, slate gray ■#64748B provides about 4.76:1 contrast against white.

For the current page, use royal blue ■#1D4ED8 as the fill with white ■#FFFFFF text, which provides about 6.70:1 contrast. Using a thin outline for ordinary pages and a filled treatment plus a thicker border and bold text for the current page gives users differences in shape and weight as well as color.

WCAG (Web Content Accessibility Guidelines) 2.2 Use of Color requires that color not be the only visual means of conveying information. Non-text Contrast also requires at least 3:1 contrast against adjacent colors for visual information needed to identify user-interface components and states. In this example, the current-page blue ■#1D4ED8 also provides about 6.70:1 contrast against the surrounding white ■#FFFFFF.

Expose the current page with aria-current as well as visually

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 1.2 defines aria-current for identifying the current item within a related set. In pagination, adding aria-current="page" to the current-page element programmatically identifies that number as the page currently being displayed. Within one pagination set, only one element should be marked as current.

For a hover state on another page number, light blue ■#DBEAFE with dark blue ■#1E3A8A text provides about 8.49:1 contrast. A royal-blue ■#1D4ED8 border provides about 5.49:1 contrast against ■#DBEAFE. Keeping hover as a light tint instead of the same solid fill used for the current page helps distinguish the meanings of those states.

“Previous” and “Next” are part of the same navigation. Dark blue-gray ■#334155 text on white ■#FFFFFF is one suitable example. When needed, combine arrow icons with text labels rather than relying on arrows alone to communicate direction.

Show focus as a different state from the current page

The current page means “the page being displayed,” while focus means “the item currently being operated with the keyboard.” Because these states mean different things, they should not look identical. For example, place a dark navy ■#0F172A focus ring outside a white ■#FFFFFF gap; the ring has about 17.85:1 contrast against that adjacent white. W3C Focus Visible requires a visible focus indicator for keyboard-operable controls.

Even when there are many pages, there is no need to assign a different color to each number. Keeping four consistent roles—default, current, hover, and focus—makes the meaning of the color system easier to preserve as the page count grows. Emphasize only the current page and keep the rest neutral so pagination does not compete with the main content.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent combinations used for page numbers, current-page styling, hover, and focus separately.