Making quizzes on Sporcle is a many-layered challenge. Finding the perfect, original topic, figuring out the best way to present it, researching and fact checking… and the cherry on top, styling. This step may be easy to overlook, but there’s nothing like clicking into a new quiz and being greeted with an easy-to-understand and beautiful page. Here are a few quiz style tips.
Sporcle Quiz Style Tools
Classic quizzes are the quiz type with some of the most in-depth styling, so that’s the focus for this post. The same basic tenets apply to other quiz formats, but for each one the style tab will be slightly different. Getting familiar with the style tab is a crucial step in taking your quizzes to the next level.
Sporcle presents colors as hexadecimal codes by default. The entry field is also shown in the selected color, and the preview to the right will help you see how the color will look in context with the other style settings. Hexadecimal codes represent color by pairs of numerals or letters – the first two represent red, the next two green, and the last two blue. You can find out more about how hexadecimal works here, but it’s not necessary to understand the encoding to use color well in quiz-creation. You can click one of the fields and a color picker will pop up. The full color spectrum is shown, with the highest saturation versions of the colors at the top, and low saturation at the bottom. The slider to the right controls brightness.
Saturation, for those who don’t know, refers to a color’s intensity. A saturated red is very red, and a mid or low saturation red will have some white, black, or gray mixed in. Medium saturation colors are often a little easier on the eye, and more easily paired up with other colors without too much clashing.
That said, color matching and pairing falls more into the realm of color theory.
Color Theory
Most people have probably seen a version of the color wheel at some point. Some of the basic concepts of color theory are best understood with the help of the color wheel. What color schemes are specifically “harmonious” or “good” is influenced by culture, personal taste, and mood, but it’s good to know what works well for most people.
Two-color schemes
Opposite colors on the wheel are considered complementary colors. This means they have a lot of contrast with each other, and are basically as different as possible. When used thoughtfully, this can make for a really energetic and dynamic color scheme. That said, it can also be a little intense, especially if the colors are solid blocks of highly saturated color. Think of Christmas colors – they can look very pretty on a wreath or tree, but you probably wouldn’t paint your living room in red and green stripes.
Colors that sit next to each other are analogous. Blue and green-blue, for example, on the image above, sit next to each other. This means that their contrast with each other is fairly low. They won’t usually clash, and a color scheme made of analogous colors will usually be fairly harmonious, or at least inoffensive.
Three color schemes
The more colors added to a scheme, the harder it gets to keep everything coordinated. For three color schemes, triadic and split-complementary groupings are popular. Triadic schemes grab three colors roughly equidistant on the wheel (such as red, yellow, and blue). Triadic schemes can be fairly intense, as all three of the colors have a lot of contrast with each other.
Split-complementary schemes “split” one half of a complementary set, and grab analogous colors of it while holding the other half together. This sounds complicated, but an example should clarify. If you take red-green, a complementary pair, and split green into yellow-green and blue-green, you now have a split-complementary set. Two of the colors are analogous with each other and match well, and the contrast is provided by the unsplit red.
Summary
The easiest color schemes to put together are probably analogous ones. Split-complementary schemes are a nice follow-up option for those who want more contrast and color. Complementary and triadic schemes are high contrast and very colorful, but that can make them more difficult to coordinate. Changing the proportions of color used can also influence the contrast and intensity. Choosing to use one color as your main and the others as small accents is a popular way to incorporate a lot of color without having them compete.
Advanced Coloring Options
As mentioned in our Hidden Features of Sporcle post, we also offer the option to color your quizzes row by row. Using hexadecimal and the “Use extra column for color values” checkbox, you can create all kinds of wild color effects. Gradients are particularly popular. To create a gradient, you’ll want to change each color incrementally from the last to create a soft fade from row to row. It’s especially well-liked on quizzes where you don’t need to scan the data much, like typing challenges.
Zebra striping is an effect used on charts sometimes (especially borderless charts) that can be useful on long quizzes. For zebra striping, very faint and low contrast colors are usually preferred (like white and light gray). They’re just there to help you scan the data more easily. Bright stripes can be too harsh.
Themes
Lots of quiz creators like to match the color to the theme or concept of the quiz. For example, a quiz about Japan might use white with a few red highlights to match the Japanese flag. In these cases, it’s important to remember to still pay attention to legibility and harmony. A massive quiz with a bright red background and white text would be hard on the eye. Instead, the same scheme could work with red headers and a white background for the majority of the data.
If you’d like a dead-on match to a specific themed color, finding a hexadecimal code for the official color is your easiest method. The hexadecimals for the red, white, and blue, of the American flag, for example, are #FFFFFF, #B22234, #3C3B6E. That said, there’s nothing wrong with slightly modifying colors to be more suitable for your use here. If the official red, white, and blue look like too much to you, using a dark subdued red and navy can allude to the quiz theme without being so literal.
Example Quizzes
These quizzes all use the advanced cell-by cell options to get some beautiful and creative results. Colors by Any Word and Physics Typing Challenge and The Little Mermaid Typing Challenge.
Legibility
So far, we’ve mostly talked about color in the context of the background color of the cells. Colors of backgrounds are mostly about mood and taste. Text has the additional challenge of needing to be useful and readable.
For text, the best color is probably black. If you prefer an inverted color scheme with dark backgrounds, white text can be alright too. But getting wild with text color is a quick path to illegibility. The reasons for this are varied, but basically, clashing colors will hurt the eyes, and low contrast colors will make it hard to pick out the text.
Color isn’t the only factor affecting legibility, but it is one of the main ones you have control over in Sporcle quizzes. The other is text size. Smaller text is harder to read, especially for those with poor eyesight. Large text, however, might make your quiz start to get tall, and it’s unpleasant to have to scroll a lot to read all the information in a quiz. If you have a lot of columns, large text might cause overflow and too many line breaks.
Large numbers of line breaks also negatively impact legibility, so choosing the ideal text size involves a bit of a balancing act. The ideal character-length for a line in long texts and articles is 50-75 characters, but for a quiz on a grid, even shorter than that is preferable. Knocking the font size down a bit to reduce scrolling and line breaks is often a good idea, as long as you don’t hit very small text sizes.
Borders and Columns
A Sporcle classic quiz also involves the grid itself. Border lines are like text – they’re functional rather than purely aesthetic. The safest bet, similarly, is black. White can work, but as the background of the site is white, it can give a “borderless” sort of look. Colors are a bit dangerous to coordinate. Mid-shade grays are low contrast with most colors. This can be pleasant in some settings, but for a grid it can make it hard to pick out the edges of the cells. Highly saturated and bright colors, on the other hand, are likely to clash. So if you do want color, a very dark or very light version is most likely to work. Generally a border size of 1 pt will serve you perfectly well, and is the best default choice.
Column Spacing
The most important thing to consider with your columns is spacing. If you can get all of your data to fit on one line for each cell, that’s ideal. But that will require some adjusting and testing of your column proportions. There are also cases where it just won’t be possible. In that case, you can still get your columns to line up height-wise (if the data doesn’t need to be in a specific order) by making sure there’s an equal amount of line breaks across the columns. But in summary: the more characters you have in a cell, the bigger that column needs to be, horizontally. On the other hand, if you’re getting extra space on the sides of your cells, add more columns. The height of the column should be primarily influenced by the amount of cells within it and the text size.
This quiz is a good example of managing columns and spacing well for excellent legibility. There’s a lot of data but it’s easy to find what you want and there’s no clutter.
Next time you’re making a quiz, take quiz style into account. Pay attention to what works and doesn’t work when playing other quizzes. Color, legibility, and spacing are key. And have fun!
