Guides

Let's start with the fundamentals of Color, and work up from there. There are three main values that computers use to determine color:

- Hue: this is, well, the "color" of color. Hue values can be seen as a circle that shifts across the entire rainbow across it's perimeter. Hue values ranges are degrees, 0 to 360, which determine which color is shown. 0 is a red, 60 is a yellow, etc.

- Saturation: The intensity of the hue. Higher saturation values will show the hue "brighter", more vibrant. Lower saturation values cause the hue to become muted, or greyed out.

- Luminosity: Also called lightness, brightness, or value. This affects how light or dark the color is. With a saturation of 0, meaning no hue is visible, 100% brightness is pure white, and 0% is pure black.

Colors can be split into four categories, based on how saturation and luminosity work together to affect any hue.


We won't get into color theory here, as there are plenty of guides both on and off site for that. All I'll say on it is to use neon colors sparingly. They cause a lot of eyestrain, even in small amounts. If you use a lot of neon colors, consider lowering either luminosity or saturation a bit, in order to ease this strain while still keeping the intent and feel of the bright colors.

When choosing colors, the website Coolors is very useful. It allows you to create, save, and share color schemes, and it'll even generate complimentary colors for you if you need some help. I highly recommend it!


Contrast is one of the most important parts of making sure your graphics not only look nice, but are accessible to all. Color contrast is how much two colors stand out and are distinct from each other. The higher contrast your text and graphics are, the easier they will be to read and understand. This takes all aspect of a color into account- not just luminosity, but hue and saturation as well.

Every color can be compared against another color to get a ratio that represents the contrast between them. In order to be in compliance with the WCAG, you'll want ratios equal or greater to the following:

The math behind getting these ratios is complicated, but luckily there are programs that can do this math for us!

Coolors has a great feature that allows you to compare two colors and see the contrast ratio, as well as gives you a score based on how well the colors contrast and even provides a preview of what these colors look like together.

While colors are an important part of any thread design, it's important to keep in mind not everyone can see them. You'll want to make sure that your graphics are understandable to colorblind people as well. Coolors has a feature for this, but it isn't very robust. Instead, I'd like to point you towards Coblis, or Color Blindness Simulator. This program was made by people with colorblindness, and it allows you to view any image through filters that approximate what people with various colorblind conditions see. Use this to check your color schemes; you want to make sure there's a high amount of contrast under all of them.

Text size:

Using bbcode, you can change the size of your text using [size= ] . The value after the equal sign determines the text size: 3 is the default, go above that for larger text and below for smaller text.

Larger text is good for headings, navigation bars, and other essential information. They help break up large sections of text. Smaller text should be reserved for things that are important for you to have on the page, but might not be things any visitors need to be able to read. Pinglists are the biggest one that comes to mind- if you've been on the skin and accent threads, you've definitely seen your fair share of 300 name-long GASP pinglists, reduced to a single block of undreadable text by the use of nested size bbcode.

Try not to get too overboard with it, though: in many cases, if somebody needs larger text, they'll be able to zoom in. Think of text size as a way to organize your thread, to tell any reader how to navigate and what things they should be focused on. Large text is essential. Small text is irrelevant

Spacing:

Spacing is the gaps between lines of text. WCAG recommends that lines be spaced apart a distance 1.5 times the font size. Flight rising has a okay standardized line spacing, but this is good to keep in mind for text in images.

On a related note, use frequent paragraph breaks! This will be more important to those writing extensive lore: whether it's to accompany your sales thread or in a dragon's bio. Walls of text are hard on the eyes, so make sure you're separating (and indenting!) your paragraphs.

Text typeface:

When creating a thread, you'll want to make sure that the typeface you choose are easy to read, but also fit the style of your thread. Typeface choices are highly subjective, and what's readable for one person may not be for another. My typefaces of choice are monospace and courier new, while some people prefer arial. Even the maligned comic sans has a place- a lot of my dyslexic friends find it to be the easiest typeface to read. Here's a few guidelines to stick to, though:

• Keep the body text simple. Fancier typefaces should be saved for headings, and other uses of larger text
  
• Typefaces with serifs (little strokes on the end of letters, seen on typefaces like times new roman) can help distinguish letters from each other. They're especially useful in lower resolutions, which is why you see serif typefaces more often on older websites.
  
• Make sure letters are evenly spaced and distinct. If your typeface makes it hard to tell the difference between 0 and O, or I, 1, and l, it's time to go find a different one.
  
• Be careful with typefaces that use very thin lines. These can get tricky to read when small
  
• Script or cursive typefaces are very hard to read. Use these sparingly, like you would neon colors, and be very picky about the ones you do use
  
• When using a typeface you think might be harder to read- a script typeface, one with thin lines, etc: Try to increase the contrast ratio even more to help make up the difference

Screen readers are programs that, like the name suggest, read text off of a screen. This allows people who can't read text to still get information, so you'll want to make sure that everything is read out in the order you want it to. The easiest way to do that is to try out a screen reader for yourself! Many browsers have a screen reader built in, but you can also get them as browser extensions. Try it out, and see how your thread sounds and that everything is in order. If you use a lot of columns you may find things don't quite line up the way you want them to.

In a similar vein, try to navigate your thread using only the keyboard, No mouse at all. Make sure you can access all the links and sections of your thread. If not, you may need to restructure things so they can be accessed by those who don't use mice.

Note: this section is one that i can't speak much to, as somebody who doesn't use accessibility tools. If you do, and you have suggestions for things to be added here, please let me know! It helps not only this guide but everyone who reads it in the future.

got some tips you want to share for specific types of thread graphics? links to other accessibility guides? ping me! I'll put them here so everyone can use them.


clutter:

Often, i see a lot of graphics (most notably breeding cards) that are extremely visually busy. Fancy affects in the foregrounds, glow on the text, bright and detailed image in the background. Graphics like this can be hard to parse and understand.

When creating graphics, try to avoid having both detailed backgrounds and foregrounds. Try using svgs like those found at https://game-icons.net/ , rather than photographs. With the low resolution of flight rising forum images, focusing on sharp, readable lines is essential in order to make things readable and easy on the eyes

Font changer:

Here's a link to a chrome extension that changes the font on websites to whatever you like. if you have a hard time reading flight rising's base font, give this a shot!

---

and finally, some credits/thanks.
shout outs to @gayrurumon , @Requacy , @PixelSpiral , @Lykos , @Sciencing , and everyone else in the thread i first pitched this idea to. Your suggestions were a great help!

@AzureArchangel
@PixelSpiral
@Welgan
@HydreigonOxide
@Abject
@rosatherad
@stormcatcherhere
@Owleics
@TacoTequila

alright, first pass at the guide is complete! this just has the basics for now, but hopefully i'll be adding to it over time. thank you all so much for the support and suggestions!

This is really awesome! Thank you so much for mentioning font variability! As someone who finds Serif Fonts and Comic Sans easier to read (except, oddly enough, Times New Roman), I'm really glad you mentioned it!

Thank you so much! This is already extremely helpful! I'll definitely be examining my threads more in depth.

@Requacy thank you for reminding me of it! and while i'm on the subject, here's something i'm gonna drop into the resources section- a chrome extension that allows you to change the typefaces displayed to you.

maybe it'll be useful to you and let you change everything to a more readable font! i'm sure there's similar ones for other browsers if you don't use chrome too

@AzureArchangel no problem! glad to help