How Should You Choose a Color Scheme for a Community Website? How to Organize Posts and User Information

A community website displays more than the main text of each post. The author, posting time, and whether someone has read the post may all appear on the same screen. Giving each detail a bright color makes it harder to tell what should be read and where to act. This guide uses a fictional book-discussion community to show how a restrained palette can keep posts central while making user information easy to find.

Give posts, author details, and status indicators different roles

Start by showing each post’s title and preview text in the clearest, darkest text color. Keep the author’s name and posting time together near the title, but distinguish these secondary details using a quieter text color or a slightly smaller size. An avatar, the small image or icon representing a member, can help people locate the author information. Always include the member’s displayed name so identity does not depend on an avatar image or its colors.

If the author’s name opens a profile, display it as a recognizable link using a distinguishable link color and an underline. The posting time, by contrast, is usually descriptive information rather than an action, so a secondary text color is sufficient. Even within one group of author details, links should not look identical to non-interactive labels.

For states such as “Unread,” use a text label, not just a colored background. Likewise, name post categories “Question” or “Review” rather than assigning each type another strong color. Reserve the main action color for a button such as “Create a post,” giving the action and status indicators distinct jobs.

A six-color palette for a book-discussion feed

Imagine a fictional community where members share book recommendations, impressions, and questions. A HEX code represents a color with a hash sign (#) followed by six hexadecimal characters. Assign these colors to consistent parts of the interface:

• Feed background: pale green-gray #F4F7F6 — the space surrounding posts.
• Post cards: white #FFFFFF — the surfaces on which titles and excerpts are read.
• Titles and body text: deep green-gray #233A37 — the primary text color.
• Dates and secondary information: medium gray-green #566964 — posting times, supporting text, and borders when necessary.
• Links and new-post button: deep teal #245C67 — profile-name links and the “Create a post” button.
• Unread-label background: pale blue-green #DFEDF0 — a compact area for showing unread status.

For example, put a post titled “A favorite book I read recently” in ■#233A37 on a white card ■#FFFFFF. Below it, show the fictional member name “Mika” as an underlined link in ■#245C67 and the timestamp “2 hours ago” in ■#566964. Display the word “Unread” in ■#245C67 on a small ■#DFEDF0 label background. These post details, member name, and timestamp are illustrative, not real user information.

Use ■#F4F7F6 behind the entire feed. Fill the “Create a post” button with ■#245C67 and use ■#FFFFFF for its text. The contrast between the page and white cards is only about 1.08:1, so separate ordinary cards with adequate spacing. If an entire card is clickable and its outline needs to be identifiable, a thin border in ■#566964 has a contrast ratio of about 5.83:1 against white.

A contrast ratio measures the difference in relative brightness between adjacent colors. Main text ■#233A37 on white ■#FFFFFF is approximately 12.13:1; secondary text ■#566964 on white is approximately 5.83:1. White button text ■#FFFFFF on deep teal ■#245C67 reaches about 7.50:1, while unread-label text ■#245C67 on ■#DFEDF0 reaches about 6.25:1. All four combinations exceed the 4.5:1 minimum for normal-size text at Level AA of the Web Content Accessibility Guidelines (WCAG) 2.2. For boundaries or icons necessary to recognize an interface control, also check the 3:1 non-text contrast threshold against adjacent colors.

Keep information readable as the community grows

Do not assign a different body-text color to every member. Avatar images already introduce many colors. Using a consistent color for post titles and excerpts, with author details in the same place on every card, prevents the feed from becoming visually fragmented.

Do not indicate unread, read, or selected states through color alone. Include “Unread” on its label, and give a selected tab an underline or another visible shape change. Make sure status labels reflect the actual application state. Notifications, deletion controls, and other actions with different meanings also need explicit labels rather than being distinguished only by the main accent color.

Check the order of information on phones. Keep each post’s title, author, time, status, and controls clearly associated. Instead of shrinking everything to fit on one line, allow secondary information to wrap. Check the underline of links, the boundary of buttons, and keyboard-focus indicators (the outline or mark showing which control is currently selected) against their real backgrounds. Consistent color roles help people concentrate on the conversation rather than the interface.